MARKUP LANGUAGE AND OBJECT MODEL FOR VECTOR GRAPHICS 



CROSS-REFERENCE TO RELATED APPLICATIONS 

The present invention is a continuation-in-part of United 
States Patent Application No. 10/401,717 filed March 27, 2003. 

FIELD OF THE INVENTION 

The invention relates generally to computer systems, and 
more particularly to the processing of graphical and other 
video information for display on computer systems. 

BACKGROUND OF THE INVENTION 

The limits of the traditional immediate mode model of 
accessing graphics on computer systems are being reached, in 
part because memory and bus speeds have not kept up with the 
advancements in main processors and/or graphics processors. In 
general, the current (e.g., WM_PAINT) model for preparing a 
frame requires too much data processing to keep up with the 
hardware refresh rate when complex graphics effects are 
desired. As a result, when complex graphics effects are 
attempted with conventional graphics models, instead of 
completing the changes that result in the perceived visual 
effects in time for the next frame, the changes may be added 



over different frames, causing results that are visually and 
noticeably undesirable. 

A new model for controlling graphics output is described 
in United States Patent Application Serial Nos. 10/184,795, 
5 10/184,796, 10/185,775, 10/401,717, 10/402,322 and 10/402,268, 
assigned to the assignee of the present invention and hereby 
incorporated by reference. This new model provides a number of 
significant improvements in graphics processing technology. 
For example, U.S. Serial No. 10/184,795 is generally directed 

10 towards a multiple-level graphics processing system and method, 
in which a higher-level component (e.g., of an operating 
system) performs computationally intensive aspects of building 
a scene graph, updating animation parameters and traversing the 
scene graph's data structures, at a relatively low operating 

15 rate, in order to pass simplified data structures and/or 

graphics commands to a low-level component. Because the high- 
level processing greatly simplifies the data, the low-level 
component can operate at a faster rate, (relative to the high- 
level component) , such as a rate that corresponds to the frame 

20 refresh rate of the graphics subsystem, to process the data 
into constant output data for the graphics subsystem. When 
animation is used, instead of having to redraw an entire scene 
with changes, the low-level processing may interpolate 
parameter intervals as necessary to obtain instantaneous values 
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that when rendered provide a slightly changed scene for each 
frame, providing smooth animation. 

U.S. Serial No. 10/184,796 describes a parameterized scene 
graph that provides mutable (animated) values and parameterized 
5 graph containers such that program code that wants to draw 
graphics (e.g., an application program or operating system 
component) can selectively change certain aspects of the scene 
graph description, while leaving other aspects intact. The 
program code can also reuse already-built portions of the scene 
10 graph, with possibly different parameters. As can be 

appreciated, the ability to easily change the appearance of 
displayed items via parameterization and/or the reuse of 
existing parts of a scene graph provide substantial gains in 
overall graphics processing efficiency. 
15 U.S. Serial No. 10/185,775 generally describes a caching 

data structure and related mechanisms for storing visual 
information via objects and data in a scene graph. The data 
structure is generally associated with mechanisms that 
intelligently control how the visual information therein is 
20 populated and used. For example, unless specifically requested 
by the application program, most of the information stored in 
the data structure has no external reference to it, which 
enables this information to be optimized or otherwise 
processed. As can be appreciated, this provides efficiency and 
25 conservation of resources, e.g., the data in the cache data 
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structure can be processed into a different format that is more 
compact and/or reduces the need for subsequent, repeated 
processing, such as a bitmap or other post-processing result. 
While the above improvements provide substantial benefits 
5 in graphics processing technology, there still needs to be a 
way for programs to effectively use this improved graphics 
model and its other related improvements in a straightforward 
manner. What is needed is a comprehensive yet straightforward 
model for programs to take advantage of the many features and 
10 graphics processing capabilities provided by the improved 
graphics model and thereby output complex graphics and 
audiovisual data in an efficient manner. 



SUMMARY OF THE INVENTION 

15 Briefly, the present invention provides an element object 

model and a vector graphics markup language for accessing that 
element object model in a manner that allows program code 
developers to consistently interface with a scene graph data 
structure to produce graphics. The vector graphics markup 

20 language comprises an interchange format for expressing vector 
graphics via the element object model. When interpreted, the 
markup is parsed into data including elements in an element 
tree that is translated into the objects of a scene graph data 
structure. At the element tree level, a property system and 

25 layout system are provided to provide rich programmability 
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features, including inheritance characteristics and eventing, 
making it straightforward for scene designers to design 
possibly complex scenes. In general, the vector graphics 
elements correspond to shape elements and other elements 
5 including image and video elements that correlate with scene 
graph objects of the scene graph object model. The properties 
and other resources of the vector graphics elements also 
correlate with similar properties and resources the scene graph 
object model. 

10 The vector graphics system can thus program to an element 

level, in which each of the drawing shapes is represented as an 
element at the same level as the rest of the programmable 
elements in a page/screen, allowing interaction with the layout 
system, events and properties. The vector graphics system also 
15 provides a mechanism for programming to a resource level, by 

which scene designers can essentially shortcut the element tree 
and layout system and program directly to the visual API layer 
that interfaces with the scene graph data structure. This 
provides a more efficient and lightweight way to output the 
20 appropriate object, although losing of some of the 

programmability of the element level. In one implementation, 
when a fill of type "visual brush" is programmed, the parser 
can directly call the API layer with resource level data to 
create a corresponding visual paint object (which is also a 
25 correlation between the element object model and the scene 
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graph object model) . In this two-tiered system, element level 
vector graphics get parsed into created elements, which need 
later translation to the objects, while resource level vector 
graphics get parsed and directly stored in an efficient manner. 
5 At the same time, the resource level data or the objects 

created thereby can be referenced by elements and part of the 
element tree. To this end, elements including visual paint 
elements may be named. The scene designer thus has the ability 
to balance efficiency against programmability as needed. 
10 The element class hierarchy includes a shape class, an 

image class, a video class and a canvas class. Elements of the 
shape class include rectangle, polyline, polygon, path, line 
and ellipse. Each element may include or be associated with 
fill (property) data, stroke data, clipping data, transform 
15 data, filter effect data and mask data. Shapes correspond to 
geometry (of the scene graph object model) that is drawn with 
inherited and cascaded presentation properties that are used to 
construct the pen and the brush needed to draw the shapes. The 
image class is more specific than a shape and can include more 
20 raster graphical data, while the video class allows video (or 
similar multimedia) to be played within a displayed element. 
The canvas class may act as a container for shapes, to keep 
shapes lightweight. 

In one implementation the markup code is interpreted by a 
25 parser / translator which generally adds element-level elements 
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to an element tree / property system and attaches data to those 
elements. The layout system then takes the element tree with 
the attached presenters and translates the data to objects (via 
a builder) and calls to a visual API layer that interfaces with 
the scene graph and creates the scene graph objects. 

The markup language provides distinct ways to describe an 
element, including a simple string format or a complex object 
notation (a complex property syntax) . For a simple string 
format, the parser / translator and/or layout system uses a 
type converter for converting a string to an appropriate visual 
API object. When the fill attribute is too complex to fit into 
a single string, complex property syntax, which may be inline 
in the markup, is used to describe the property set. Because 
the same rendering model is shared between the element level 
and the API level, many of the objects are the same, which 
makes parsing / translation highly efficient and provides other 
benefits. A resource instance also may be located elsewhere 
(e.g., in the markup or a file), and referenced by a name. In 
this manner, a scene designer can reuse an element in the 
element tree throughout a scene, including elements described 
by the complex property syntax. 

Other benefits and advantages will become apparent from 
the following detailed description when taken in conjunction 
with the drawings, in which: 



BRIEF DESCRIPTION OF THE DRAWINGS 

FIGURE 1 is a block diagram representing an exemplary 
computer system into which the present invention may be 
incorporated; 

5 FIG. 2 is a block diagram generally representing a 

graphics layer architecture into which the present invention 

may be incorporated; 

FIG. 3 is a representation of a scene graph of visuals and 
associated components for processing the scene graph such as by 
10 traversing the scene graph to provide graphics commands and 
other data in accordance with an aspect of the present 
invention; 

FIG. 4 is a representation of a scene graph of validation 
visuals, drawing visuals and associated Instruction Lists 
15 constructed in accordance with an aspect of the present 
invention; 

FIG. 5 is a representation of a visual class, of an object 
model, in accordance with an aspect of the present invention; 

FIG. 6 is a representation of various other objects of the 
20 object model, in accordance with an aspect of the present 
invention; 

FIG. 7 is a representation of a transform class hierarchy, 
in accordance with an aspect of the present invention; 

FIGS. 8 and 9 are representations of transformations of a 
25 visual's data in a geometry scale and a non-uniform scale, 



- 8 - 



respectively, in accordance with an aspect of the present 
invention; 

FIG. 10 is a representation of geometry classes of the 
object model, in accordance with an aspect of the present 
5 invention; 

FIG. 11 is a representation of a PathGeometry structure, 
in accordance with an aspect of the present invention; 

FIG. 12 is a representation of a scene graph of visuals 
and instruction Lists showing example graphics produced by the 
10 primitives, in accordance with an aspect of the present 
invention; 

FIG. 13 is a representation of brush classes of the object 
model, in accordance with an aspect of the present invention; 
FIGS. 14 and 15 are representations of rendered graphics 
15 resulting from data in a linear gradient brush object, in 
accordance with an aspect of the present invention; 

FIG. 16 is a representation of rendered graphics resulting 
from data in a radial gradient brush object, in accordance with 
an aspect of the present invention; 

FIG. 17 is a representation of a rendered nine grid brush 
object in accordance with an aspect of the present invention. 

FIG. 18 is a representation of rendered graphics resulting 
from having various stretch values, in accordance with an 
aspect of the present invention; 



20 
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FIG. 19 is a representation of rendered graphics resulting 
from having various tile values, in accordance with an aspect 
of the present invention; 

FIG. 20 is a representation of a grid and transformed 
grid, resulting from data in a visual brush object, in 
accordance with an aspect of the present invention; 

FIG. 21 is a representation of the grid and transformed 
grid, with rendered graphics therein drawn from a visual, in 
accordance with an aspect of the present invention; 

FIG. 22 is a representation of element classes of the 
element object model, in accordance with an aspect of the 

present invention; 

FIG. 23 is a representation of components for interpreting 
markup language code to interface with the visual API layer, in 
accordance with an aspect of the present invention; and 

FIG. 24 is a representation of clipping via a geometry 
path in accordance with an aspect of the present invention. 

DETAILED DESCRIPTION 

EXEMPLARY OPERATING ENVIRONMENT 

FIGURE 1 illustrates an example of a suitable computing 
system environment 100 on which the invention may be 
implemented. The computing system environment 100 is only one 
example of a suitable computing environment and is not intended 
to suggest any limitation as to the scope of use or 
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functionality of the invention. Neither should the computing 
environment 100 be interpreted as having any dependency or 
requirement relating to any one or combination of components 
illustrated in the exemplary operating environment 100. 
5 The invention is operational with numerous other general 

purpose or special purpose computing system environments or 
configurations. Examples of well known computing systems, 
environments, and/or configurations that may be suitable for 
use with the invention include, but are not limited to, 
10 personal computers, server computers, hand-held or laptop 
devices, tablet devices, multiprocessor systems, 
microprocessor-based systems, set top boxes, programmable 
consumer electronics, network PCs, minicomputers, mainframe 
computers, distributed computing environments that include any 
15 of the above systems or devices, and the like. 

The invention may be described in the general context of 
computer-executable instructions, such as program modules, 
being executed by a computer. Generally, program modules 
include routines, programs, objects, components, data 
20 structures, and so forth, which perform particular tasks or 
implement particular abstract data types. The invention may 
also be practiced in distributed computing environments where 
tasks are performed by remote processing devices that are 
linked through a communications network. In a distributed 
25 computing environment, program modules may be located in both 
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local and remote computer storage media including memory 
storage devices. 

With reference to FIG. 1, an exemplary system for 
implementing the invention includes a general purpose computing 
device in the form of a computer 110. Components of the 
computer 110 may include, but are not limited to, a processing 
unit 120, a system memory 130, and a system bus 121 that 
couples various system components including the system memory 
to the processing unit 120. The system bus 121 may be any of 
several types of bus structures including a memory bus or 
memory controller, a peripheral bus, and a local bus using any 
of a variety of bus architectures. By way of example, and not 
limitation, such architectures include Industry Standard 
Architecture (ISA) bus, Micro Channel Architecture (MCA) bus, 
Enhanced ISA (EISA) bus, Video Electronics Standards 
Association (VESA) local bus, Accelerated Graphics Port (AGP) 
bus, and Peripheral Component Interconnect (PCI) bus also known 

as Mezzanine bus. 

The computer 110 typically includes a variety of computer- 
readable media. Computer-readable media can be any available 
media that can be accessed by the computer 110 and includes 
both volatile and nonvolatile media, and removable and non- 
removable media. By way of example, and not limitation, 
computer-readable media may comprise computer storage media and 
communication media. Computer storage media includes both 
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volatile and nonvolatile, removable and non-removable media 
implemented in any method or technology for storage of 
information such as computer-readable instructions, data 
structures, program modules or other data. Computer storage 
5 media includes, but is not limited to, RAM, ROM, EEPROM, flash 
memory or other memory technology, CD-ROM, digital versatile 
disks (DVD) or other optical disk storage, magnetic cassettes, 
magnetic tape, magnetic disk storage or other magnetic storage 
devices, or any other medium which can be used to store the 
10 desired information and which can accessed by the computer 110. 
Communication media typically embodies computer-readable 
instructions, data structures, program modules or other data in 
a modulated data signal such as a carrier wave or other 
transport mechanism and includes any information delivery 
15 media. The term "modulated data signal" means a signal that 

has one or more of its characteristics set or changed in such a 
manner as to encode information in the signal. By way of 
example, and not limitation, communication media includes wired 
media such as a wired network or direct-wired connection, and 
20 wireless media such as acoustic, RF, infrared and other 

wireless media. Combinations of the any of the above should 
also be included within the scope of computer-readable media. 

The system memory 130 includes computer storage media in 
the form of volatile and/or nonvolatile memory such as read 
25 only memory (ROM) 131 and random access memory (RAM) 132. A 
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basic input/output system 133 (BIOS), containing the basic 
routines that help to transfer information between elements 
within computer 110, such as during start-up, is typically 
stored in ROM 131. RAM 132 typically contains data and/or 
5 program modules that are immediately accessible to and/or 

presently being operated on by processing unit 120, By way of 
example, and not limitation, FIG. 1 illustrates operating 
system 134, application programs 135, other program modules 136 
and program data 137. 

10 The computer 110 may also include other removable /non- 

removable, volatile/nonvolatile computer storage media. By way 
of example only, FIG. 1 illustrates a hard disk drive 141 that 
reads from or writes to non-removable, nonvolatile magnetic 
media, a magnetic disk drive 151 that reads from or writes to a 

15 removable, nonvolatile magnetic disk 152, and an optical disk 
drive 155 that reads from or writes to a removable, nonvolatile 
optical disk 156 such as a CD ROM or other optical media. 
Other removable/non-removable, volatile/nonvolatile computer 
storage media that can be used in the exemplary operating 

20 environment include, but are not limited to, magnetic tape 

cassettes, flash memory cards, digital versatile disks, digital 
video tape, solid state RAM, solid state ROM, and the like. 
The hard disk drive 141 is typically connected to the system 
bus 121 through a non-removable memory interface such as 

25 interface 140, and magnetic disk drive 151 and optical disk 



- 14 - 



drive 155 are typically connected to the system bus 121 by a 
removable memory interface, such as interface 150. 

The drives and their associated computer storage media, 
discussed above and illustrated in FIG. 1, provide storage of 
computer-readable instructions, data structures, program 
modules and other data for the computer 110. In FIG. 1, for 
example, hard disk drive 141 is illustrated as storing 
operating system 144, application programs 145, other program 
modules 146 and program data 147. Note that these components 
can either be the same as or different from operating system 
134, application programs 135, other program modules 136, and 
program data 137. Operating system 144, application programs 
145, other program modules 146, and program data 147 are given 
different numbers herein to illustrate that, at a minimum, they 
are different copies. A user may enter commands and 
information into the computer 110 through input devices such as 
a tablet (electronic digitizer) 164, a microphone 163, a 
keyboard 162 and pointing device 161, commonly referred to as 
mouse, trackball or touch pad. Other input devices (not shown) 
may include a joystick, game pad, satellite dish, scanner, or 
the like. These and other input devices are often connected to 
the processing unit 120 through a user input interface 160 that 
is coupled to the system bus, but may be connected by other 
interface and bus structures, such as a parallel port, game 
port or a universal serial bus (USB) . A monitor 191 or other 
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type of display device is also connected to the system bus 121 
via an interface, such as a video interface 190. The monitor 
191 may also be integrated with a touch-screen panel 193 or the 
like that can input digitized input such as handwriting into 
the computer system 110 via an interface, such as a touch- 
screen interface 192. Note that the monitor and/or touch 
screen panel can be physically coupled to a housing in which 
the computing device 110 is incorporated, such as in a tablet- 
type personal computer, wherein the touch screen panel 193 
essentially serves as the tablet 164. In addition, computers 
such as the computing device 110 may also include other 
peripheral output devices such as speakers 195 and printer 196, 
which may be connected through an output peripheral interface 
194 or the like. 

The computer 110 may operate in a networked environment 
using logical connections to one or more remote computers, such 
as a remote computer 180. The remote computer 180 may be a 
personal computer, a server, a router, a network PC, a peer 
device or other common network node, and typically includes 
many or all of the elements described above relative to the 
computer 110, although only a memory storage device 181 has 
been illustrated in FIG. 1. The logical connections depicted 
in FIG. 1 include a local area network (LAN) 171 and a wide 
area network (WAN) 173, but may also include other networks. 
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Such networking environments are commonplace in offices, 
enterprise-wide computer networks , intranets and the Internet. 

When used in a LAN networking environment, the computer 
110 is connected to the LAN 171 through a network interface or 
5 adapter 170. When used in a WAN networking environment, the 
computer 110 typically includes a modem 172 or other means for 
establishing communications over the WAN 173, such as the 
Internet. The modem 172, which may be internal or external, 
may be connected to the system bus 121 via the user input 

10 interface 160 or other appropriate mechanism. In a networked 
environment, program modules depicted relative to the computer 
110, or portions thereof, may be stored in the remote memory 
storage device. By way of example, and not limitation, FIG. 1 
illustrates remote application programs 185 as residing on 

15 memory device 181. It will be appreciated that the network 

connections shown are exemplary and other means of establishing 
a communications link between the computers may be used. 

GRAPHICS ARCHITECTURE 

20 One aspect of the present invention is generally directed 

to allowing program code, such as an application or operating 
system component, to communicate drawing instructions and other 
information (e.g., image bitmaps) to graphics components in 
order to render graphical output on the system display. To 

25 this end, the present invention provides a markup language 
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along with a set of shape elements and other elements, a 
grouping and compositing system, and integration with a general 
property system in an object model to enable programs to 
populate a scene graph with data structures, drawing primitives 
(commands), and other graphics-related data. When processed, 
the scene graph results in graphics being displayed on the 
screen. 

FIG. 2 represents a general, layered architecture 200 into 
which the present invention may be implemented. As represented 
in FIG. 2, program code 202 (e.g., an application program or 
operating system component or the like) may be developed to 
output graphics data in one or more various ways, including via 
imaging 204, via vector graphic elements 206, and/or via 
function / method calls placed directly to a visual application 
programming interface (API) layer 212. Direct interaction with 
the API layer is further described in the aforementioned 
copending patent application entitled "Visual and Scene Graph 
Interfaces. " 

In general, imaging 204 provides the program code 202 with 
a mechanism for loading, editing and saving images, e.g., 
bitmaps. These images may be used by other parts of the 
system, and there is also a way to use the primitive drawing 
code to draw to an image directly. 

In accordance with an aspect of the present invention, 
vector graphics elements 206 provide another way to draw 
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graphics, consistent with the rest of the object model (as 
described below) . Vector graphic elements 206 may be created 
via a markup language, which an element / property system 208 
and layout system 210 processes to make appropriate calls to 
the visual API layer 212. As described below, in general the 
vector graphic elements 206 are parsed into objects of the 
object model from which a scene graph is drawn, which may be 
provided to the scene graph via an element level via the 
element / property system 208 and layout system 210, or may be 
provided in a more efficient manner at a resource level, as 
also described below. 

In one implementation, the graphics layer architecture 200 
includes a high-level composition and animation engine 214, 
which includes or is otherwise associated with a caching data 
structure 216. The caching data structure 216 contains a scene 
graph comprising hierarchically-arranged objects that are 
managed according to a defined object model, as described 
below. In general, the visual API layer 212 provides the 
program code 202 (and the layout system 210) with an interface 
to the caching data structure 216, including the ability to 
create objects, open and close objects to provide data to them, 
and so forth. In other words, the high-level composition and 
animation engine 214 exposes a unified media API layer 212 by 
which developers may express intentions about graphics and 
media to display graphics information, and provide an 
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underlying platform with enough information such that the 
platform can optimize the use of the hardware for the program 
code. For example, the underlying platform will be responsible 
for caching, resource negotiation and media integration. 

In one implementation, the high-level composition and 
animation engine 214 passes an instruction stream and possibly 
other data (e.g., pointers to bitmaps) to a fast, low-level 
compositing and animation engine 218. As used herein, the 
terms "high-level" and "low-level" are similar to those used in 
other computing scenarios, wherein in general, the lower a 
software component is relative to higher components, the closer 
that component is to the hardware. Thus, for example, graphics 
information sent from the high-level composition and animation 
engine 214 may be received at the low-level compositing and 
animation engine 218, where the information is used to send 
graphics data to the graphics subsystem including the hardware 
222. 

The high-level composition and animation engine 214 in 
conjunction with the program code 202 builds a scene graph to 
represent a graphics scene provided by the program code 202. 
For example, each item to be drawn may be loaded with drawing 
instructions, which the system can cache in the scene graph 
data structure 216. As will be described below, there are a 
number of various ways to specify this data structure 216, and 
what is drawn. Further, the high-level composition and 
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animation engine 214 integrates with timing and animation 
systems 220 to provide declarative (or other) animation control 
(e.g., animation intervals) and timing control. Note that the 
animation system allows animate values to be passed essentially 
anywhere in the system, including, for example, at the element 
property level 208, inside of the visual API layer 212, and in 
any of the other resources. The timing system is exposed at 
the element and visual levels. 

The low-level compositing and animation engine 218 
manages the composing, animating and rendering of the scene, 
which is then provided to the graphics subsystem 222. The low- 
level engine 218 composes the renderings for the scenes of 
multiple applications, and with rendering components, 
implements the actual rendering of graphics to the screen. 
Note, however, that at times it may be necessary and/or 
advantageous for some of the rendering to happen at higher 
levels. For example, while the lower layers service requests 
from multiple applications, the higher layers are instantiated 
on a per-application basis, whereby is possible via the imaging 
mechanisms 204 to perform time-consuming or application- 
specific rendering at higher levels, and pass references to a 
bitmap to the lower layers. 
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SCENE GRAPH OBJECT MODEL 

As described below, the rendering model is shared by the 
higher-level, control-based vector graphics elements 206, and 
the lower-level objects created by the visual API layer 212 
used in the scene graph data structure 216. This provides a 
significant amount of correlation between the higher-level 
elements of the present invention, and the lower-level objects. 
The following describes one implementation of the scene graph 
object model. 

The present invention offers several layers of access to 
graphics and rendering services. At a top layer, Vector 
Graphics) provides a number of advantages common to XML-based 
graphics markup, including that it is straightforward to use 
with the object model of the present invention, it is readily 
reusable, and it is generally familiar to users of similar 
systems. Objects are available as markup elements, with 
properties exposed either as attributes on those elements or as 
complex properties. 

The present invention renders graphics content through the 
use of Visual objects. This underlying Visual layer is 
available in several ways. Programmers can access visuals 
directly in code; they can program using the object model; and, 
in accordance with an aspect of the present invention, they can 
use XML-based markup. 
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Predefined vector shapes are available in Vector Graphics, 
like the Polygon and Path elements, and are contained within a 
layout element, such as Canvas, Dock Panel, and Flow Panel. The 
Canvas element provides a means for absolutely positioning 
elements within a parent space. For the Canvas and its child 
shapes, the default unit of measurement for screen coordinates 
is the device independent pixel. DockPanel and FlowPanel 
provide a number of size and alignment properties, as well as 
control over borders. 

Vector Graphics provides a number of defined vector 
graphics shapes that will be familiar to users of SVG. These 
elements inherit from the Shape class, and include Ellipse, 
Line, Path, Polygon, Polyline, and Rectangle. These elements 
inherit a number of common attributes from Shape, including 
Stroke and StrokeThickness, Fill, and data attributes to 
specify coordinates and vertices. Developers can also skew, 
rotate, translate, and scale shapes by applying 
transformations . 

The Line element provides a convenient example. The 
following example specifies coordinates for the start and end 
points, a stroke color and width, and rounded capping on the 
ends of the line. 

<Canvas ID="root" 
xmlns= w http : / /schemas . microsoft . com/2003/xaml" 
Background="White"> 

<Line Stroke="#000000" 
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StrokeThickness=" 10" 
StrokeStartLineCap="2" 
StrokeEndLineCap= w 2" 
Xl="200" 
Yl="10" 
X2="50" 
Y2="300'7> 
</Canvas> 

An Ellipse is created by defining the shape's center with 

the CenterX and CenterY properties. Instead of specifying foci, 

the bounds of the ellipse are set by setting the RadiusX and 

RadiusY properties. To draw a circle in Vector Graphics, the 

developer can specify an ellipse whose RadiusX and RadiusY 

values are equal. 

<Ellipse 
Fill= w yellow" 
CenterX="3in" 
CenterY="2.2in" 
RadiusX="lin" 
RadiusY="2in" 
FillOpacity= M 0.3" 
StrokeWidth="4px" 
Stroke= w blue"/> 



The Path object provides the means to draw curves and 
complex shapes, whether open or closed. Path exposes the 
properties generally available on objects that inherit from the 
Shape class, but also enables developers to specify more 
complex parameters to describe curves. Developers can use 
paths in markup in various ways, including to specify path data 
using a special syntax in the Data, or specify individual path 
segments using the PathGeometry and PathGeometry objects. 
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The coordinate pairs and inline parameters provided for 
the Data attribute can specify line segments, Bezier curves, 
and a variety of other path specifications. The following 
example shows a Path element that defines two subpaths. 

<Canvas ID="root" 
xmlns="http: //schemas. microsoft .com/20 03/xaml" 
Background="White"> 

<Path Data="M 100,200 C 100,25 400,350 400,175 H 280" 

Stroke-" DarkGoldenRod" 

StrokeThickness= w 3"/>s 

</Canvas 

The Data attribute string begins with the "moveto" 
command, indicated by M, which establishes a start point for 
the path in the coordinate system of the Canvas. Path data 
parameters are case-sensitive. The capital M indicates an 
absolute location for the new current point. A lowercase m 
would indicate relative coordinates. The first subpath is a 
cubic Bezier curve beginning at (100,200) and ending at 
(400,175), drawn using the two control points (100,25) and 
(400,350). This subpath is indicated by the C command in the 
Data attribute string. Again, the capital C indicates an 
absolute path; the lowercase c would indicate a relative path. 

The second subpath begins with an absolute horizontal 
"lineto" command H, which specifies a line drawn from the 
preceding subpath' s endpoint (400,175) to a new endpoint 
(280,175). Because it is a horizontal "lineto" command, the 
value specified is an x-axis coordinate. 
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It is also possible to use a more verbose syntax to 
specify path data in markup, which might have the advantage of 
allowing the developer to specify complex properties and make 
the markup more readable. In this case, the PathGeometry 
object may be used to create complex shapes, such as arcs and 
curves. PathGeometry objects are comprised of one or more 
PathFigure objects; each PathFigure represents a different 
"figure" or shape. Each PathFigure is itself comprised of one 
or more PathSegment objects, each representing a connected 
portion of the figure or shape. Segment types include 
LineSegment, BezierSegment , and ArcSegment. 

The following code specifies path data by using the 
PathGeometry and a PathFigure; several segments are added to 
the PathFigure to form a shape. In this case, segments have 
been added using the PathFigure object's Segments property. 
This markup creates four Bezier curves. Note that the first 
segment of a PathFigure is a StartSegment : 



<Canvas ID="root" 
Background="White" 

xmlns="http : //schemas .microsoft . com/2003/xaml > 

<Path ID= w myPath" 
Fill="Blue" 
Stroke="Black" 
StrokeThickness="5"> 

<Path.Data> 

<GeometryCollection> 

<PathGeometry> 

<PathGeometry . Figures> 
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<PathFigureCollection> 
<PathFigure> 

<PathFigure . Segments> 
<PathSegmentCollection> 

<StartSegment Point= w 400, 100"/> 
<BezierSegment Point 1=" 4 00, 100" 

Point2="400,200" Point3="200, 300"/> ___„ 

<BezierSegment Pointl= 400,300 

Point2="400,100" Point3="200, 50"/> 

<BezierSegment Pointl= xv 0, 100 

Point2=«0,200" Point3="200,300"/> 

<BezierSegment Pointl="0, 300 

Point2="0,100" Point3="200,50"/> 

</PathSegmentCollection> 

</PathFigure . Segments> 
</PathFigure> 
</PathFigureCollection> 

</PathGeometry . Figures> 
</PathGeometry> 

</GeometryCollection> 
</Path.Data> 
</Path> 

</Canvas> 



The Vector Graphics shapes expose various attributes of 

the Brush object to specify the color of their Stroke and Fill. 

The following example specifies these attributes on Canvas and 

Ellipse elements. Note that valid input for color properties 

can be either a keyword or hexadecimal color value. 

<Canvas ID= w root" 
xmlns= w http: //schemas .microsoft . com/2003/xaml" 
Background= w LightGray"> 

<Ellipse 

Fill="#FFFFFF00" 

Cent erX= w 100" 

CenterY= w 200" 

RadiusX="75" 

RadiusY= w 7 5" 

StrokeThickness= M 5" 

Stroke= w #FF0000FF"/> 

</Canvas> 
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Alternatively, a developer can use complex property syntax 
and the SolidColorBrush class to specify colors. Specifying 
properties using more complex syntax becomes necessary when 
5 reusing graphics markup with property sheets, or to animate 
shape properties like color. 

<Canvas ID="root" 
xmlns="http: //schemas .microsoft . com/2003/xaml 
10 Background= >x LightGray"> 

This irregular polyline shape uses pre-defined color 
values for the Stroke and Fill properties. The FillOpacity 
15 property affects the fill color in this case by makingit 

slightly transparent (opacity of 0.8) so that it blends with 
any underlying color: 



20 



<POl poin?s= w 300,200 400,125 400,275 300,200" 
Stroke="Purple" 
StrokeThickness="2.3" > 

^"'^'so'lidCo'lorBrush Color-Blue" Opaolty=»0 . 4V> 

25 </Polyline.Fill> 

</Polyline></Canvas> 

just as when specifying solid color fills and backgrounds 
for shapes, gradients may be specified. The following example 
30 sets a horizontal gradient as the Fill property of a Rectangle, 
with Blue as the start color and Red as the end color. 
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<Rectangle 

Fill="HorizontalGradient Blue Red 
RectangleLeft="120" 
RectangleTop="120" 
5 RectangleWidth="100" 

RectangleHeight="100"> 
</Rectangle> 



A developer can also specify gradients with complex 
10 property notation. This notation provides a greater degree of 
specificity in rendering the gradient and exposes additional 
properties. To animate a shape's fill with a gradient, for 
example, complex notation would be used. The following example 
uses the RadialGradientBrush object to set a gradient on a 
15 Rectangle. The RadialGradientBrush object provides access to 
the gradient's properties, like its radius and any transforms 
or animations that might be set on it; these properties are 
inherited from GradientBrush. The GradientStopCollection 
collection enables the developer to specify multiple gradient 
20 stops and indicate their Offset (the location of the stop in 

the gradient) : 

<Rectangle RectangleLef t="10" RectangleTop="250" 
RectangleWidth="300" RectangleHeight="200"> 
<Rectangle . Fill> 
25 <RadialGradientBrush Focus="0 . 5, 0 . 5"> 

<RadialGradientBrush . GradientStops> 
<GradientStopCollection> 

<GradientStop Color="red" Offset="0"/> 
30 <GradientStop Color="yellow" Offset="l"/> 

<GradientStop Color="blue" Of f set= w 0 . 5"/> 
</GradientStopCollection> 
</RadialGradientBrush . Gradient Stops> 

35 </RadialGradientBrush> 

</Rectangle . Fill> 
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</Rectangle> 



The present invention provides standard transformations 
for vector-drawn shapes. A developer can skew shapes, rotate 
5 them, change their scale, and translate (reposition) them 
either as static graphics or in animations. To use the 
Transform objects in markup, they need to be specified as 
children of the Transf ormDecorator . 

The ScaleTransform transformation is the most 
10 straightforward of the available transformations, and is used 
by simply specifying a factor by which the element should be 
resized. The following example resizes a Polygon element by 150 
percent along the y-axis of the coordinate system of the parent 
Canvas : 

15 <Canvas ID="root" 

xmlns="http: //schemas .microsoft . com/2 003 /xaml"> 

<Transf ormDecorator Af f ectsLayout= %x f alse"> 
<Transf ormDecorator . Transf orm> 
20 <ScaleTransform ScaleX="l" 

ScaleY="1.5" /> 

</Transf ormDecorator . Transf orm> 
<Polygon ID="star3" 
Stroke="red" 
25 StrokeThickness="2 . 0" 

Points="176.5,50 189.2,155.003 286.485,113.5 201.9,177 
286.485,240.5 

189.2,198.997 176.5,304 163.8,198.997 66.5148,240.5 
151.1,177 66.5148,113.5 
30 163.8,155.003" /> 

</TransformDecorator> 

</Canvas> 
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Note that if specifying further transformations in the 
same TransformDecorator object, the need to be enclosed in a 
Transf ormCollection. Also, the order in which each 
transformation is parsed and applied makes a difference in the 
final effect. For example, rotating an element before 
translating it to different screen coordinates may make a 
dif ference. 

The following example shows a rotation and a translation 
applied to two polyline elements: 

<! — Rotate, then translate — > 
<TransformDecorator Af f ectsLayout= x> f alse"> 
<Transf ormDecorator. Transf orm> 

<TransformCollection> 

<RotateTransform Angle="45" /> 
<TranslateTransform X="100" Y="100" 

/> 

</TransformCollection> 
</Transf ormDecorator . Transf orm> 
<Polyline ID="box4" 

Stroke="Green" 

StrokeThickness="5" 

Points="0,0 10,10 10,50 50,50 50,10 10,10"> 
</Polyline> 
</TransformDecorator> 

<! — Translate, then rotate — > 

<Transf ormDecorator Af f ectsLayout="f alse"> 

<Transf ormDecorator . Transf orm> 

<TransformCollection> 

<TranslateTransform X="200" Y="200" 

/> 

<RotateTransform Angle="15" /> 
< /Trans formCollection> 
</Transf ormDecorator. Transf orm> 
<Polyline ID="box5" 
Stroke="Cyan" 
StrokeThickness="5" 

Points="0,0 10,10 10,50 50,50 50,10 10,10"> 
</Polyline> 
< /Trans formDecorator> 
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Note that these two transformations do not yield the same 
final screen position for their respective shapes. When using 
the rotation transformation, the transformation rotates the 
entire coordinate system for a particular element. Depending 
5 on an element's position with respect to the origin, the effect 
of the rotation might not be to rotate it "in place." For 
example, for an element positioned 200 units from zero along 
the x-axis, for instance, a rotation of 30 degrees has the 
effect of swinging the element 30 degrees along a circle with 

10 radius 200, drawn around the origin. For this reason, it is 

more straightforward when dealing with a Transform to translate 
the element to the origin, apply a rotation, skew, or scale 
transformation, and then translate the element back to its 
eventual location. 

15 A particular syntax may be used to specify a rotation 

around a particular point, independent of other translations in 
the transform settings. In effect, this syntax specifies a 
translation to a new origin, a rotation, and a translation back 
to the former origin. To specify a rotation of r degrees 

20 around a point (cx,cy), use the following syntax: 
transform^rotate (rx [cx,cy] ) " 

The skew transformation enables the developer to distort a 
shape along one or both axes. The SkewTransf orm class provides 
AngleX and AngleY properties that specify a proportional offset 
25 along either axis. 
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<Canvas ID=^ v root" 
xmlns=^http: //schemas. microsoft.com/2003/xaml"> 

<! — Skewed in X — > 

<TransformDecorator Af fectsLayout= xx false"> 
<TransformDecorator .Transform> 

<TransformCollection> 

<SkewTransform AngleX="30" /> 
<TranslateTransform X="0" Y="100" /> 
</TransformCollection> 
</Transf ormDecorator. Transform> 

<Rectangle 
RectangleTop="30" 
RectangleLeft="30" 
Rect ang leWidth=" 80" 
RectangleHeight="50" 
Stroke="Red" 
StrokeThickness="5" /> 
</TransformDecorator> 

<l — Skewed in Y — > 

<TransformDecorator Af fectsLayout="f alse"> 
<Transf ormDecorator . Transf orm> 

<TransformCollection> 

<SkewTransform AngleY="10" /> 
<TranslateTransform X="0" Y="200" /> 
</TransformCollection> 
</Transf ormDecorator .Trans form> 
<Rectangle 
RectangleTop="30" 
RectangleLeft= x> 30" 
RectangleWidth="80" 
RectangleHeight=*50" 
Stroke="Blue" 
StrokeThickness="5" > 
</Rectangle> 
</TransformDecorator> 



As with the other transformations, the effect of applying 
skew transforms is to skew the coordinate system, not merely 
the shape. Thus, the coordinate system is skewed from the 
origin, wherever that origin is set. If skewing transformations 
on shapes that are some distance from the origin, the -empty 
space" also reflects the skew, affecting element positioning. 
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For the same reason, the order in which developers apply 
positioning transformations affects a rendered skew or 
rotation. 

A brush is used anytime color is added to a shape or 
5 control. The present invention provides markup that enables 
the developer's application to paint a user interface (UI) 
element with anything from a simple solid color to a complex 
set of patterns and images. 

Brushes can color the interior and edges of shapes drawn 
10 on a canvas. They can also be used to change the appearance of 
any elements that make up the UI. The following are some 
attributes of the Brush type and can accept any of the brushes: 

Control . Background 
Control . BorderBrush 
15 Column. Background 
Text . Foreground 
Shape. Fill 
Shape. Stroke 

There are two main types of brushes, namely vector and 
bitmap brushes. Vector-based brushes include SolidColorBrush, 
LinearGradientBrush, RadialGradientBrush, and DrawingBrush 
(although a DrawingBrush can contain shapes filled with 
25 bitmaps) . Bitmap-based brushes include ImageBrush and 

NineGridBrush. In general, bitmaps lose quality when stretched 
or scaled to fill an area; vectors do not. Therefore, vector- 
based brushes should be used whenever possible. 
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A basic type of fill is a SolidColorBrush, which fills an 
area with a solid color. There are several ways to specify a 
solid color, well-known colors can be selected by name. For 
example, the Fill attribute of a shape can be set to "Red." A 
color can be chosen from the 32-bit color palette by specifying 
the amounts of red, green, and blue to confine into a single 
solid color. The format for specifying a color from the 32-bit 
palette is »#RRGGBB», where RR is a two digit hexadecimal 
number specifying the relative amount of red, GG specifies the 
amount of green, and BB specifies the amount of blue. 
Additionally, the color can be specified as "#AARRGGBB" where 
AA specifies the alpha channel, or transparency, of the color. 
Other color schemes are feasible. 

in the following example, the Fill of an Ellipse element 
is set using one of the predefined color names. 

xmlns.«http : /Ts a c n h V emas.microsoft.com/2003/xaml"> 

<Ellipse 
Fill= w Red" 
CenterX="80" 
CenterY="80" 
RadiusX="50" 
RadiusY="50" /> 
</Canvas> 

While the alpha channel can be specified directly in any 
solid color brush, it can also be specified with the brush's 
Opacity property. The opacity of an entire element and its 
child elements may be specified using the UIElement .Opacity 
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property. Each of these values is specified as a Double 
between zero and one. A value of one is fully opaque and a 
value of zero is fully transparent. The various methods of 
describing opacity are cumulative. That is, if the alpha 

5 channel is 0x7F (50 percent opacity) and the UIElement .Opacity 
property is 0.5 (50 percent opacity), the element is painted 
with 25 percent opacity. 

A gradient brush is a fill that changes from one color to 
another along an axis. There are two types of gradients 

10 supported in Vector Graphics (Vector Graphics) : linear and 

radial gradients. 

The basic building block of a gradient brush is the 
gradient stop. A gradient stop specifies a color at a relative 
offset along the gradient axis. The color of the points 
15 between gradient stops is linearly interpolated as a 

combination of the color specified by the two bounding gradient 
stops. The offset is a Double that ranges from zero to one. 
Examples of Gradients are set forth below. 

One way to have a Gradient brush is by specifying gradient 
stops explicitly. The following is an example: 

<Button . Background> 
<LinearGradientBrush> <. c ^ c -> 
<LinearGradientBrush . GradientStops> 
<GradientStopCollection> 
25 <GradientSto P Color=«Red» Offset- 0 /> 

<GradientSto P Color-«Blue» Of f set - 0. /> 
<GradientSto P Color-Grange Offset- 0.75 /> 
<GradientStop Color="Yellow" Offset- 1 /> 
< /GradientStopCollect ion> 
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</LinearGradientBrush . GradientStops> 
</LinearGradientBrush> 
< /Button . Background> 

In the following example, a LinearGradientBrush is used to 
fill the Background of a Button with a linear gradient that has 

four gradient stops. 

<Button . Background> 
<LinearGradientBrush> 

<LinearGradientBrush . GradientStops> 
<GradientStopCollection> 

<GradientStop Color="Red" Offset="0" /> 
<GradientStop Color="Blue" Offset="0.25 /> 
<GradientStop Color="Orange" Offset="0.75 /> 
<GradientStop Color="Yellow" 0ffset="l'7> 
</GradientStopCollection> 
</LinearGradientBrush . GradientStops> 
</LinearGradientBrush> 
< /Button . Background> 

A RadialGradientBrush is used to fill an area with a 
radial gradient. A radial gradient is similar to a linear 
gradient, but the gradient axis is from the interior of an 
ellipse to the exterior. A circle filled with a radial gradient 
might have a yellow center and a green outline, with 
interpolated colors in between. The following image shows a 
rectangle filled with a radial gradient that goes from white to 
grey. The outside circle represents the gradient circle while 
the red dot denotes the focal point. This gradient has its 
SpreadMethod set to Pad. 
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In the following example, the Fill property of a Rectangle 
element is set using a RadialGradientBrush. The radial gradient 
has a Focus point of (0.5,0.5). 



<Rectangle . Fill> 
<RadialGradientBrush Focus="0 . 5, 0 . 5"> 

<RadialGradientBrush . GradientStops> 
<GradientStopCollection> 

<GradientStop Color="red" Offset="0"/> 
<GradientStop Color="yellow" Offset="l"/> 
<GradientStop Color="blue" Of f set="0 . 5"/> 
</GradientStopCollection> 
</RadialGradientBrush . GradientStops> 

</RadialGradientBrush> 
</Rectangle . Fill> 



When creating a gradient with only two colors, keywords 

can be used for the stroke, fill, and background properties to 

simplify the notation. The following sample shows how to 

create a rectangle filled with a horizontal gradient, a type of 

linear gradient, that changes from blue to red. 

<Rectangle 
Fill="HorizontalGradient Blue Red" 
RectangleLeft="120" 
RectangleTop="120" 
RectangleWidth="100" 
RectangleHeight="100" /> 

The abbreviated syntax for creating horizontal, vertical, 
and radial gradients is the following: 

GradientType StartColor EndColor, where GradientType is 
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VerticalGradient, HorizontalGradient, or RadialGradient . 
StartColor and EndColor may be predefined color names (such as 
Blue) or hexadecimal values. 

A vertical gradient is a linear gradient whose start and 
end points form a vertical line; similarly, a horizontal 
gradient is a linear gradient whose start and end points form a 
horizontal line. Developers can explicitly describe their own 
two-color linear gradients using the following syntax: 
LinearGradient Start Point EndPoint StartColor EndColor, where 
StartPoint and EndPoint are the starting and ending 
coordinates, with each coordinate expressed as a pair of x and 
y values from zero to one, such as 0.1,0.1 and 0.5,0.5. These 
values indicate the relative position of the start or end 
point; an end point of 0.5,0.5 would be located 50 percent to 
the right of the fill area and 50 percent of the way from the 
top of the area-placing the point in the middle of the shape. 

In the following example, the Fill property of a Rectangle 
element is set by explicitly using a linear gradient. 
<Rectangle 

Fill="LinearGradient 0.1,0.1 0.5,0.5 Blue Green" 

RectangleLeft="220" 

RectangleTop="220" 

RectangleWidth="100" 

RectangleHeight="100" /> 

The following example demonstrates how to fill an area 
with a two-color radial gradient using abbreviated syntax: 
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<Rectangle 
Fill="RadialGradient Blue Red" 
RectangleLeft="320" 
RectangleTop="320" 
RectangleWidth="100" 
RectangleHeight="100" /> 



In addition to the Fill attribute, gradients can also be 
used to fill the outline of an object, such as the Stroke of 
Shape elements. 

A drawing brush makes it possible to fill a shape or 
control with combinations of other shapes and brushes. Shapes 
inside of a DrawingBrush, unlike normal Shape elements, are not 
elements in the element tree. Instead, they are parsed and 
rendered directly by the media layer. This can result in 
significantly improved performance in cases where the part of 
the user interface is composed of many shapes. 

A drawing brush is a type of TileBrush. The section 
provides information about additional features the developer 
can use to control how a drawing brush fills its output area. 

An ImageBrush fills an area with a bitmap image. The 

following sample shows how to use an ImageBrush to render an 

image as the background of a Canvas. 

<Canvas Height="400" Width="600" 
xmlns="http: //schemas. microsoft . com/2 003 /xaml" > 
<Canvas .Background> 
<ImageBrush 

Stretch="Uniform" 
HorizontalAlignment="Left" 
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VerticalAlignment="Top" 
ImageSource="gecko. jpg" /> 
< /Canvas . Background> 
</Canvas> 

An image brush is a type of Tile Brush, The section 
provides information about additional features developers can 
use to control how an image fills its output area. 

Both DrawingBrush and ImageBrush are types of tile brushes 
(they derive from the TileBrush class) . Therefore, they have a 
common set of features that enable developers to control with 
great detail how an area is filled. For example, instead of 
just filling an area with a single stretched image, developers 
can fill an area with a series of image tiles that create a 
pattern. 

A tile brush describes one or more tiles filled with 
content. An ImageBrush is a tile brush that fills its tiles 
with a bitmap image. A DrawingBrush is a tile brush that fills 
its tiles with a drawing. 

Tile brushes provide the developer with two levels of 
control; developers can control how the brush's content fills 
its tiles, and the developer can control how the brush's tiles 
fill an area. By default, the tile brush fills the output area 
with a single tile, and the brush's content is stretched to 
fill that tile. Some of the properties that enable the 
developer to override this default behavior are the Stretch, 
ViewPort, and ViewBox properties. The Stretch property (also 



described below with reference to FIG. 18) defines how the 

brush's content fills its tiles. The ViewPort defines the size 

and position of a brush's tiles, and the ViewBox property 

determines the size and position of the brush's content. 

The Stretch property controls how a tile brush' s content 

is stretched to fill its tiles. The Stretch property accepts 

the following values, defined by the Stretch enumeration: 

None: The brush's content is not stretched to fill the tile. 

Fill: The brush's content is scaled to fit the tile. Because 
the content's height and width are scaled independently, the 
original aspect ratio of the content might not be preserved. 
That is, the brush's content might be warped in order to 
completely fill the output tile. 

Uniform: The brush's content is scaled so that it fits 
completely within the tile. The content's aspect ratio is 
preserved. 

UniformToFill: The brush's content is scaled so that it 
completely fills the output area while preserving the 
content's original aspect ratio. 

The HorizontalAlignment and VerticalAlignment properties 
determine how a tile brush's content is aligned within its 
tiles. The HorizontalAlignment property accepts the following 
values, defined by the HorizontalAlignment enumeration: Left, 
Center, and Right. The VerticalAlignment property accepts the 
following values, defined by the VerticalAlignment enumeration 
Top, Center, and Bottom. 

The ViewPort property determines the size and position of 
a brush's tiles. The ViewPortUnits property determines whether 
the ViewPort is specified using absolute or relative 
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coordinates. If the coordinates are relative, they are relative 
to the size of the output area. The point (0,0) represents the 
top left corner of the output area, and (1,1) represents the 
bottom right corner of the output area. To specify that the 
ViewPort property uses absolute coordinates, set the 
ViewPortUnits property to Absolute. 

In the following example, an image is used to create a 
tile that has a width and height of 100, and with its top left 
corner at (0,0). 



<Rectangle . Fill> 
<ImageBrush ViewPort="0, 0 100,100" 
ViewPortUnits="Absolute" 

ImageSource="help.gif" TileMode="Tile"/> 
</Rectangle.Fill> 



The size and position of the brush's content can be 
specified using the ViewBox property. When a tile brush's tile 
doesn't completely fill the output area, its TileMode property 
specifies how the remaining output area is filled. The TileMode 
property accepts the following values, defined by the TileMode 
enumeration: 

None: Only the base tile is drawn. 

Tile: The base tile is drawn and the remaining area is 
filled by repeating the base tile such that the right edge 
of one tile is adjacent to the left edge of the next, and 
similarly for bottom and top. 

FlipX: The same as Tile, but alternate columns of tiles are 
flipped horizontally. 



FlipY: The same as Tile, but alternate rows of tiles are 
flipped vertically. 

FlipXY: A combination of FlipX and FlipY. 

Different tiling modes are described below with reference 
FIG. 19. 



10 A NineGridBrush, described below with reference to FIG. 17 

is very similar to an image brush in that it fills an area with 
a bitmap image. With a NineGridBrush, however, the image is 
divided into nine regions or grids by four borders. For more 
information, see the NineGridBrush page. 
15 FIGS. 3 and 4 show example scene graphs 300 and 400, 

respectively, including the base object referred to as a 
Visual. Visual Objects, or simply visuals, are containers for 
graphical content such as lines, text, and images. As 
represented in the object inheritance of the visual classes in 
20 FIG. 5, there are several different visual objects, including 
ContainerVisual, which is a Visual that does not directly 
contain graphical content, but contains child Drawing Visual 
objects. Child DrawingVisual objects are added to a 
ContainerVisual rather than to other DrawingVisual objects. 
25 This allows the developer to make changes and set properties on 
individual visual objects without recreating and then re- 
rendering the entire drawing context, while also allowing 
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access to clipping and transform properties on the container 
object. ContainerVisual objects can be nested. 

A DrawingVisual is a Visual that can contain graphical 
content. This Visual exposes a number of drawing methods. The 
5 child objects of a DrawingVisual are organized in a zero-based, 
z-order space. A RetainedVisual is A Visual that introduces a 
"retained instruction stream" that can be used for drawing. In 
simpler terms, the RetainedVisual allows the developer to 
retain the visual's content and redraw it only when necessary. 
10 It is possible to use the RetainedVisual imperatively, like a 
DrawingVisual, by calling RenderOpen and using the returned 
DrawingContext for drawing. The RetainedVisual provides 
validation callback functionality and an InvalidateVisual 
method. To use validation functionality, the user implements 
15 the IRetainedRender interface on the RetainedVisual or a class 

that derives from it. 

Returning to FIG. 5, yet another visual is an HwndVisual 
505, which is a Visual used to host a legacy Microsoft® Win32® 
control or window as a child visual inside a visual scene of a 

20 scene graph. More particularly, legacy programs will still 
operate via the WM_PAINT method (or the like) that draws to a 
child HWnd (or the like) based on prior graphics technology. 
To support such programs in the new graphics processing model, 
the HwndVisual allows the Hwnd to be contained in a scene graph 

25 and moved as the parent visual is repositioned. Other types of 
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visuals are also feasible, such as three-dimensional (3D) 
vi suals which enable a connection between two-dimensional ana 
thr ee dimensional worlds, e.g.. a camera-liKe view is possible 
via a two-dimensional visual having a view into a three- 

5 dimensional world. 

A s shown in FIG. 3, a VisualManager 304 comprises an 
object that connects a visual tree to a medium. The 
VisualManager establishes a retained connection between the 
visual data structure ,the root visual 302, and the target to 
X0 which that data is rendered, offering the possibility of 

tracking differences between the two. The VisualManager 304 
selves window messages and provides methods for transforming 
a point in drawing coordinates to device coordinates and vrce 
versa . 

A typical application might draw graphics by defining a 
la yout in "XAML" as described in the aforementioned United 
States patent application Serial No. 10/401,717, and also by 
specifying some drawing operations in C#. Developers may 

i«n*nts or draw geometries using the Geometry 
create Shape elements, or ataw y 

. • rn thP following scenario, the code 

20 classes with primitives. In the follow! g 

3. ^linse in the Visual that underlies 
demonstrates drawing an ellipse 

the Canvas: 
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mainWindow - new MSAvalon. Windows .Window (); 

Canvas myCanvas = new Canvas (); 
mainWindow . Children . Add (myCanvas ) ; 

Ellipse el = new Ellipse Or- 
el. Fill = Brushes .Blue; 
el'.Stroke = Brushes .Black; 
el.StrokeThickness = new Length (iu) , 
el.CenterX = new Length(lOO); 
el.CenterY = new Length (75); 
el.RadiusX = new Length (bU); 
el.RadiusY = new Length (50); 

myCanvas. Children. Add (el) ; 
mainWindow . Show ( ) ; 
} 



Using the Visual API , developers can instead draw directly 
into the Visual (that would otherwise be accessed via by the 

layout element) . 
5 to render the content o£ a DrawingVisual object, an 

application typically calls the RenderOpen method on the 
DrawingVisual. RenderOpen returns a DrawingContext with which 
the application can perform drawing operations. To clear the 
Visual's contents, the application calls Close on the 
10 DrawingContext. After the application calls Close, the 
DrawingContext can no longer be used. 

The following code draws an ellipse (the same ellipse as 
in the previous example) into a DrawingVisual, using a Geometry 
object rather than the Ellipse shape. The example creates a 
15 DrawingVisual, gets the DrawingVisual- s DrawingContext, and 
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calls the DrawingContext' s DrawGeometry method to draw the 
ellipse. Note that the developer needs to add the Visual to 
the visual tree of the top-level object, which in this case is 
the window. 



mainWindow = new MSAvalon .Windows .Window () ; 
mainWindow . Show ( ) ; 

DrawingVisual myDrawingVisual = new 
DrawingVisual ( ) ; 

DrawingContext myDrawingContext = 
myDrawingVisual . RenderOpen ( ) ; 

SolidColorBrush mySolidColorBrush = new 
SolidColorBrush ( ) ; 

mySolidColorBrush. Color = Colors. Blue; 
Pen myPen = new Pen (Brushes . Black, 10); 

EllipseGeometry aGeometry = new EllipseGeometry (new 
Point (100,75) , 50, 50); 

myDrawingContext . DrawGeometry (mySolidColorBrush, 
myPen, aGeometry) ; 

myDrawingContext . Close ( ) ; 

( (IVisual) mainWindow) .Children. Add (myDrawingVisual) 



The following example further builds on the previous 
example by adding similar ellipses to a ContainerVisual; note 
that this example is verbose for clarity) . Using 
10 ContainerVisual can help organize scene objects and allow the 
developer to segregate Visual objects on which to perform hit- 
testing or validation (RetainedVisual objects) from ordinary 
drawn content, and minimize unnecessary redrawing of content. 
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mainWindow = new MSAvalon. Windows .Window () ; 

mainWindow . Show ( ) ; 

//Create some Visuals 

ContainerVisual myContainer = new ContainerVisual () ; 

DrawingVisual myDrawingVisual = new DrawingVisual () ; 
DrawingVisual myDrawingVisual_l = new DrawingVisual () ; 
DrawingVisual myDrawingVisual_2 = new DrawingVisual () ; 

//Perform some drawing 

DrawingContext myDrawingContext * 
myDrawingVisual . RenderOpen ( ) ; 

SolidColorBrush mySolidColorBrush = new SolidColorBrush () ; 

mySolidColorBrush. Color = Colors. Violet ; 

Pen myPen « new Pen (Brushes . Black, 10); 

EllipseGeometry aGeometry = new EllipseGeometry (new 
Point (100,75) , 50, 50); 

myDrawingContext . DrawGeometry (mySolidColorBrush, myPen, 
aGeometry) ; 

myDrawingContext . Close ( ) ; 

DrawingContext myDrawingContext_l = 
myDrawingVisual_l . RenderOpen ( ) ; 

mySolidColorBrush. Color = Colors. Red; 

Pen myPenl = new Pen (Brushes .Orange, 10); 

EllipseGeometry aGeometryl = new EllipseGeometry (new 
Point (100, 175), 50, 50); 

myDrawingContext_l . DrawGeometry (mySolidColorBrush, myPenl, 
aGeometryl); 

myDrawingContext_l . Close ( ) ; 

DrawingContext myDrawingContext_2 = 
myDrawingVisual_2 . RenderOpen ( ) ; 

mySolidColorBrush. Color = Colors . Yellow; 

Pen myPen2 = new Pen (Brushes .Blue, 10); 

EllipseGeometry aGeometry2 = new EllipseGeometry (new 
Point (100,275) , 50, 50); 

myDrawingContext_2 . DrawGeometry (mySolidColorBrush, myPen2 , 
aGeometry2 ) ; 

myDrawingContext_2 . Close { ) ; 

//Add DrawingVisuals to the ContainerVisual' s VisualCollection 
myContainer . Children . Add (myDrawingVisual ) ; 
myContainer . Children . Add (myDrawingVisual_l ) ; 
myContainer . Children .Add (myDrawingVisual_2 ) ; 

//Add the ContainerVisual to the window 

( (IVisual) mainWindow) . Children. Add (myContainer) ; 



A RetainedVisual is similar to a DrawingVisual , but allows 
for selective redrawing of visual content. As its name 
suggests, the RetainedVisual can retain content for multiple 
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appearances on the medium. It also provides callback and 
validation functionality. This functionality can help with 
rendering performance by offering the developer greater control 
over re-rendering of content. 
5 At a basic level, the user can create and use a 

RetainedVisual much like a DrawingVisual; that is, the user can 
call RenderOpen and get a DrawingContext . Alternatively, the 
user can implement the IRetainedRender interface on a 
RetainedVisual. By doing so, users ensure that the graphics 

10 system will use the value set in the RenderBounds property as 
the bounds for the content to be rendered at the 
IRetainedVisual. Render call. 

When rendering the scene, the graphics system will examine 
any child Visual. If the value of the RenderBounds property 

15 indicates that a particular Visual's content will be needed in 
rendering a scene, the system will call IRetainedVisual . Render 
to fill the content of the Visual, replacing any content 
already in memory. The application can also call 
InvalidateVisual directly to flush content from a Visual. If 

20 the application has not implemented IRetainedRender on the 
RetainedVisual, any call to InvalidateVisual will throw an 
exception. 

The following code instantiates a class that implements 
IRetainedRender on a RetainedVisual and draws into it. 
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public class Rectangle : RetainedVisual, IRetainedRender 
{ 

public Rectangle (Color color, Rect rect) : 

base ( ) 

{ 

m_color = color; 
m_rect = rect; 
RenderBounds = rect; 

} 

public void SetColor (Color color) 
{ 

m_color = color; 
InvalidateVisual ( ) ; 

} 

public void Render (DrawingContext ctx) 
{ 

ctx . DrawRectangle ( 

new SolidColorBrush (m_color) , 

null, 

m_rect) ; 

} 

} 



The Visual API, like the rest of the graphics system of 
the present invention, is a managed API and makes use of 
5 typical features of managed code, including strong typing and 
garbage collection. It also takes advantage of the hardware 
acceleration capability for rendering. To accommodate 
developers working with existing unmanaged applications, the 
Visual API provides limited interoperability between the 
10 present graphics system and Microsoft Windows® Graphics Device 
Interface (GDI) -based rendering services. 

This interoperability allows developers to host GDI-based 
windows in Visual-aware applications using the Hwnd Visual 
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object , write controls and theming that are based on the 
present invention's drawing and rendering, but still work in 
legacy GDI applications, and Modify GDI HWND-based applications 
to take advantage of the new rendering features, including 
5 hardware acceleration and the color model. 

The HwndVisual enables hosting of Win32 content in a 
Visual-aware application. As represented in FIG. 5, HwndVisual 
inherits from ContainerVisual . Note that it is not possible to 
mix GDI and the new drawing models in the same HwndVisual. 
10 Instead, this visual might be more useful for legacy controls 
of limited scope. The following example demonstrates creating a 
control in an HwndVisual and adding it to the visual tree. 



//Import Win32 resources and define variables for a control. 



//Create the control. 
hwndControl = CreateWindowEx ( 
0, 

WC_TREEVIEW, 

WS_CHILD | WS_VISIBLE | TVS__HASLINES | TVS_LINESATROOT | 

TVSJiASBUTTONS, 

x, 

Y, 
cx, 

cy, 

hwndParent, 
IntPtr.Zero, 
IntPtr . Zero, 
0); 

//Create an HwndVisual for the control and add it to a 

previously-defined 

//collection. 

s visuall = HwndVisual. GetHwndVisual (hwndControl) ; 
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s_visuall. Size = new Size (150, 150); 
s_visuall. IsHwndDpiAware = false; 

s visualO. Children. Add (s visuall); 

As with other objects, the developer can apply transforms 
and other property changes to the control once hosted in a 
Visual, 



TransformCollection t = new Transf ormCollection ( ) ; 
t.AddScale(1.4, 1.4); 
t .AddTranslate (130, 80) ; 

s visualO .Children. SetTransform(s visuall, t) ; 

As represented in FIG. 3, a top-level (or root) Visual 302 
is connected to a Visual manager object 304, which also has a 
relationship (e.g., via a handle) with a window (HWnd) 306 or 
similar unit in which graphic data is output for the program 
code. The VisualManager 304 manages the drawing of the top- 
level Visual (and any children of that Visual) to that window 
306. FIG. 6 shows the VisualManager as one of a set of objects 
600 in the object model of the graphics system described 
herein. 

To draw, the Visual manager 304 processes (e.g., traverses 
or transmits) the scene graph as scheduled by a dispatcher 308, 
and provides graphics instructions and other data to the low 
level component 218 (FIG. 2) for its corresponding window 306, 
such as generally described in the aforementioned U.S. Patent 
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Applications. The scene graph processing will ordinarily be 
scheduled by the dispatcher 308 at a rate that is relatively 
slower than the refresh rate of the lower-level component 218 
and/or graphics subsystem 222. 
5 FIG. 3 shows a number of child Visuals 310-314 arranged 

hierarchically below the top-level (root) Visual 302, some of 
which are represented as having been populated via drawing 
contexts 316, 317 (shown as dashed boxes to represent their 
temporary nature) with associated instruction lists 318 and 

10 319, respectively, e.g., containing Instruction Lists and other 
Visuals. The Visuals may also contain other property 
information. In general, most access on the base visual class 
comes via an IVisual interface, and visual derives from 
DependencyObject, as represented in FIG. 5. Among other 

15 drawing primitives, the instruction list may include a 
reference to an ImageData. That ImageData can then be 
changed/updated directly by getting a drawing context off of 
it, or by having a Surf aceVisualRenderer (alternatively named 
ImageDataVisualRenderer) . 

20 Visuals offer services by providing clip, opacity and 

possibly other properties that can be set, and/or read via a 
get method. In addition, the visual has flags controlling how 
it participates in hit testing. A Show property is used to 
show/hide the visual, e.g., when false the visual is invisible, 

25 otherwise the visual is visible. Furthermore, these objects 
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(whether Visuals at the Visual API layer or elements at the 
element layer) exist in a hierarchy. A coordinate system is 
inherited down through this hierarchy. In this way, a parent 
can push a coordinate transform that modifies the rendering 

5 pass and gets applied to that parent's children. 

The transform for a visual is on the connection to that 
visual. In other words, it is set via the 
[Get |Set]ChildTransform on the parent's IVisual interface. 

Note that the coordinate transforms may be applied in a 

10 uniform way to everything, as if it were in a bitmap. Note 
that this does not mean that transformations always apply to 
bitmaps, but that what gets rendered is affected by transforms 
equally* By way of example, if the user draws a circle with a 
round pen that is one inch wide and then applies a scale in the 

15 X direction of two to that circle, the pen will be two inches 
wide at the left and right and only one inch wide at the top 
and bottom. This is sometimes referred to as a compositing or 
bitmap transform (as opposed to a skeleton or geometry scale 
that affects the geometry only) . FIG. 8 is a representation of 

20 scaling transformation, with a non-transformed image 800 

appearing on the left and a transformed image 802 with a non- 
uniform scale appearing on the right. FIG. 9 is a 
representation of scaling transformation, with the non- 
transformed image 800 appearing on the left and a transformed 

25 image 904 with geometry scaling appearing on the right. 
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With respect to coordinate transformation of a visual , 
Transf ormToDescendant transforms a point from the reference 
visual to a descendant visual. The point is transformed from 
the post-transformation coordinate space of the reference 
5 visual to the post-transformation coordinate space of the 

descendant visual. Transf ormFromDescendant transforms a point 
from the descendant visual up the parent chain to the reference 
visual. The point is transformed from post-transformation 
coordinate space of the descendant visual to post- 
10 transformation coordinate space of the reference visual. A user 
may get a Matrix to and from a descendant and from and to any 
arbitrary visual. Two properties are available that may be 
used to determine the bounding box of the content of the 
Visual, namely DescendantBounds, which is the bounding box of 
15 the descendants, and ContentBounds which is the bounds of the 
content. Applying a Union to these provides the total bounds. 

The clip property sets (and gets) the clipping region of a 
visual. Any Geometry (the geometry class is shown in FIG. 10) 
can be used as a clipping region, and the clipping region is 
20 applied in Post-Transformation coordinate space. In one 

implementation, a default setting for the clipping region is 
null, i.e., no clipping, which can be thought of as an infinite 
big clipping rectangle from (-oo, -oo) to (+ao, +oo) . 

The Opacity property gets/sets the opacity value of the 
25 visual, such that the content of the visual is blended on the 
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drawing surface based on the opacity value and the selected 
blending mode. The BlendMode property can be used to set (or 
get) the blending mode that is used. For example, an opacity 
(alpha) value may be set between 0.0 and 1.0, with linear alpha 
5 blending set as the mode, e.g., Color = alpha * foreground 

color + (1.0-alpha) * background color). Other services, such 
as special effects properties, may be included in a visual, 
e.g., blur, monochrome, and so on. 

The various services (including transform, opacity, and 

10 clip) can be pushed and popped on a drawing context, and push/ 
pop operations can be nested, as long as there is an 
appropriate pop call for each push call. 

The PushTransf orm method pushes a transformation. 
Subsequent drawing operations are executed with respect to the 

15 pushed transformation. The pop call pops the transformation 
pushed by the matching PushTransf orm call: 

void PushTransf orm (Transform transform) ; 
void PushTransf orm (Matrix matrix); 
20 void Pop() ; . 

Similarly, the PushOpacity method pushes an opacity value. 
Subsequent drawing operations are rendered on a temporary 
surface with the specified opacity value and then composite 
25 into the scene. Pop() pops the opacity pushed by the matching 
PushOpacity call: 

void PushOpacity (float opacity); 
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void PushOpacity (FloatAnimation opacity); 
void Pop ( ) ; . 



The PushClip method pushes a clipping geometry. Subsequent 

5 drawing operations are clipped to the geometry. The clipping is 

applied in post transformation space. Pop() pops the clipping 

region pushed by the matching PushClip call: 

void PushClip (Geometry clip); 
void Pop ( ) ; . 

10 

Note that push operations can be arbitrarily nested as 
long as the pop operations are matched with a push. For 
example, the following is valid: 



PushTransf orm (...); 
DrawLine (...); 

PushClip ( ) ; 

DrawLine (...); 
Pop ( ) ; 

PushTransf orm (...); 
DrawRect (.„.); 
Pop ( ) ; 

Pop ( ) ; 

15 " ~ ^ " — — 

A ProxyVisual is a visual that may be added more than once 
into the scene graph, e.g., below a container visual. Since 
any visual referred to by a ProxyVisual may be reached by 
multiple paths from the root, read services 
20 (TransformToDescendent, Transf ormFromDescendent and HitTest) do 
not work through a ProxyVisual. In essence, there is one 
canonical path from any visual to the root of the visual tree 
and that path does not include any ProxyVisuals . 
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FIG. 4 shows an example scene graph 4 00 in which 
ContainerVisuals and DrawingVisuals (and others) are related in 
a scene graph, and have associated data in the form of 
Instruction Lists, (e.g., in corresponding drawing contexts). 
5 The ContainerVisual is a container for Visuals, and 

ContainerVisuals can be nested into each other. The children 
of a ContainerVisual can be manipulated can be manipulated with 
via methods on the IVisual interface that the ContainerVisual 
implements. The order of the Visuals in the VisualCollection 

10 determines in which order the Visuals are rendered, i.e. 

Visuals are rendered from the lowest index to the highest index 
from back to front (painting order) . 

As described above, visuals can be drawn on by populating 
their drawing contexts with various drawing primitives, 

15 including Geometry, ImageSource and MediaData. Furthermore, 
there are a set of resources and classes that are shared 
through this entire stack. This includes Pens, Brushes, 
Geometry, Transforms and Effects. The DrawingContext abstract 
class exposes a set of drawing operations that can be used to 

20 populate a DrawingVisual, ValidationVisual, ImageData, etc. In 
other words, the drawing context abstract class exposes a set 
of drawing operations; for each drawing operation there are two 
methods, one that takes constants as arguments, and one that 
takes animators as arguments. 



- 59 - 



Geometry is a type of class (FIG. 10) that defines a 
vector graphics skeleton, without stroke or fill. Each 
geometry object is a simple shape (LineGeometry, 
EllipseGeometry, RectangleGeometry) , a complex single shape 
5 (PathGeometry) or a list of such shapes GeometryCollection with 
a combine operation (e.g., union, intersection, and so forth) 
specified. These objects form a class hierarchy as represented 
in FIG. 10. 

As represented in FIG. 11, the PathGeometry is a 

10 collection of Figure objects. In turn, each of the Figure 
objects is composed of one or more Segment objects which 
actually define the figure's shape. A Figure is a sub-section 
of a Geometry that defines a segment collection. This segment 
collection is a single connected series of two-dimensional 

15 Segment objects. The Figure can be either a closed shape with 
a defined area, or just a connected series of Segments that 
define a curve, but no enclosed area. 

As represented in FIG. 12, when geometry (e.g., a 
rectangle) is drawn, a brush or pen can be specified, as 

20 described below. Furthermore, the pen object also has a brush 
object. A brush object defines how to graphically fill a 
plane, and there is a class hierarchy of brush objects. This 
is represented in FIG. 12 by the filled rectangle 1202 that 
results when the visual including the rectangle and brush 

25 instructions and parameters is processed. A Pen object holds 
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onto a Brush along with properties for Width, LineJoin, 
LineCap, MiterLimit, DashArray and DashOffset, as described 
below. As also described below, some types of Brushes (such as 
gradients and nine grids) size themselves. When used, the size 
5 for these brushes is obtained from the bounding box, e.g., when 
the GradientUnits/DestinationUnits for the Brush is set to 
RelativeToBoundingBox, the bounding box of the primitive that 
is being drawn is used. If those properties are set to 
Absolute, then the coordinate space is used. 

10 The graphics object model of the present invention 

includes a Brush object model, which is generally directed 
towards the concept of covering a plane with pixels. Examples 
of types of brushes are represented in the hierarchy of FIG. 
13, and, under a Brush base class, include Gradient Brush, 

15 NineGridBrush, SolidColorBrush and TileBrush. GradientBrush 
includes LinearGradient and RadialGradient objects. 
DrawingBrush and ImageBrush derive from TileBrush. Alternative 
arrangements of the classes are feasible, e.g., deriving from 
TileBrush may be ImageBrush, VisualBrush, VideoBrush, 

20 NineGridBrush and Drawing Brush. Note that Brush objects may 
recognize how they relate to the coordinate system when they 
are used, and/or how they relate to the bounding box of the 
shape on which they are used. In general, information such as 
size may be inferred from the object on which the brush is 

25 drawn. More particularly, many of the brush types use a 
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coordinate system for specifying some of their parameters. 
This coordinate system can either be defined as relative to the 
simple bounding box of the shape to which the brush is applied, 
or it can be relative to the coordinate space that is active at 
the time that the brush is used. These are known, 
respectively, as RelativeToBoundingBox mode and Absolute mode. 

A SolidColorBrush object fills the identified plane with a 
solid color. If there is an alpha component of the color, it 
is combined in a multiplicative way with the corresponding 
opacity attribute in the Brush base class. The following sets 
forth an example SolidColorBrush object: 



public sealed class System. Windows .Media. SolidColorBrush : Brush 
{ 

// Constructors 

public SolidColorBrush () ; // initialize to black 
public SolidColorBrush (Color color); 

public SolidColorBrush ( System. Windows . Media . Animation . ColorComposer 
colorComposer) ; 

// Properties 

public Color Color { get; } 

public IEnumerator ColorAnimations { get; } 

} 

public class System. Windows. Media. SolidColorBrushBuilder : BrushBuilder 
{ 

// Constructors 

public SolidColorBrushBuilder ( ) ; 

public SolidColorBrushBuilder (Color color); 

public SolidColorBrushBuilder (SolidColorBrush scp) ; 

// Properties 

public Color Color { get; set; } 

public AnimationList ColorAnimations { get; } 

// Methods 

public virtual Brush ToBrushO; 

} 
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The GradientBrush objects, or simply gradients, provide a 
gradient fill, and are drawn by specifying a set of gradient 
stops, which specify the colors along some sort of progression. 
The gradient is by drawn by performing linear interpolations 
5 between the gradient stops in a gamma 2.2 RGB color space; 

interpolation through other gammas or other color spaces (HSB, 
CMYK and so forth, is also a feasible alternative. Two types 
of gradient objects include linear and radial gradients. 

In general, gradients are composed of a list of gradient 

10 stops. Each of these gradient stops contains a color (with the 
included alpha value) and an offset. If there are no gradient 
stops specified, the brush is drawn as a solid transparent 
black, as if there were no brush specified at all. If there is 
only one gradient stop specified, the brush is drawn as a solid 

15 color with the one color specified. Like other resource 

classes, the gradient stop class (example in the table below) 
is derives from the changeable class and thus is selectively 
mutable, as described in the United States Patent Application 
entitled "Changeable Class and Pattern to Provide Selective 

20 Mutability in Computer Programming Environments.' 7 

Gradients are drawn by specifying a set of gradient 
stops. These gradient stops specify the colors along some sort 
of progression. There are two types of gradients presently 
supported, namely linear and radial gradients. The gradient is 
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drawn by doing interpolations between the gradient stops in the 
specified color space. 

Gradients are composed of a list of gradient stops. Each 
of these gradient stops contains a color (with the included 
5 alpha value) and an offset. If there are no gradient stops 

specified, the brush is drawn as transparent (as if there were 
no brush specified) . If there is only one gradient stop 
specified, the brush is drawn as a solid color with the one 
color specified. Any gradient stops with offsets in the range 

10 of zero to one (0.0... 1.0) are considered, with the largest 

stop in the range (—...0.0] and the smallest stop in the range 
[1.0...+°°). If the set of stops being considered includes a 
stop which is outside of the range zero to one, an implicit 
stop is derived at zero (and/or one) which represents the 

15 interpolated color which would occur at this stop. Also, if 

two or more stops are set at the same offset, a hard transition 
(rather than interpolated) occurs at that offset. The order in 
which stops are added determines the behavior at this offset; 
the first stop to be added is the effective color before that 

20 offset, the last stop to be set is the effective color after 

this stop, and any additional stops at this offset are ignored. 
This class is a Changeable like other resource classes: 



25 



public sealed class System. Windows. Media. GradientStop 
Changeable 

{ 



- 64 - 



10 



15 



20 



public GradientStop () ; public GradientStop (Color color, 

double offset) ; 
public GradientStop (Color color, ColorAnimationCollection 

colorAnimations , 

double offset, 
DoubleAnimationCollection of f setAnimations) ; 
public new GradientStop Copy(); // hides Changeable. Copy () 

// Default is transparent 
[Animation ("ColorAnimations") ] 
public Color Color { get; set; } 

public ColorAnimationCollection ColorAnimations { get; set; 
} 

// Default is 0 

[Animation ("Of f setAnimations") ] 
public double Offset { get; set; } 

public DoubleAnimationCollection Of f setAnimations { get; 
set; } 



} 



Like SolidColorBrush, this has nested Changeables in the 
animation collections. 

The GradientSpreadMethod enum specifies how the gradient 

25 should be drawn outside of the specified vector or space. 

There are three possible values, including Pad, in which the 
end colors (first and last) are used to fill the remaining 
space, Reflect, in which the stops are replayed in reverse 
order repeatedly to fill the space, and Repeat, in which the 

30 stops are repeated in order until the space is filled. The 
default value for properties of this type is Pad: 



35 



public enum System. Windows. Media. GradientSpreadMethod 
{ 

Pad, 

Reflect, 
Repeat 

} 
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FIGS, 14 and 15 provide some GradientSpreadMethod 
examples, (albeit in grayscale rather than in color) . Each 
shape has a linear gradient going from white to grey. The 
solid line represents the gradient vector. 
5 In general, a LinearGradientBrush is used to fill an area 

with a linear gradient. A linear gradient defines a gradient 
along a line. The line's end point is defined by the linear 
gradient's StartPoint and EndPoint properties. By default, the 
StartPoint of a linear gradient is (0,0), the upper-left corner 

10 of the area being filled, and its EndPoint is (1,1), the 

bottom-right corner of the area being filled. As represented 
in FIG. 15, using the default values, the colors in the 
resulting gradient are interpolated along a diagonal path. The 
black line formed from the start and end points of the gradient 

15 has been added herein to highlight the gradient's interpolation 
path. 

The ColorlnterpolationMode enum defines the interpolation 
mode for colors within a gradient. The two options are 
PhysicallyLinearGammalO and PerceptuallyLinearGamma22 . 

20 



25 



public enum ColorlnterpolationMode 
{ 

// Colors are interpolated in Gamma 1.0 space 
PhysicallyLinearGammalO, 

// Colors are interpolated in Gamma 2.2 space 
PerceptuallyLinearGamma22 

} 
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This is an abstract base class. 



public abstract class System. Windows. Media. GradientBrush : 
Brush 

{ 

internal GradientBrush () ; 

public new GradientBrush Copy ( ) ; // hides 
Changeable . Copy ( ) 



// Default is "PerceptuallyLinearGamma22" 

public ColorlnterpolationMode ColorlnterpolationMode { get; 
set; } 

// Default is RelativeToBoundingBox 

public BrushMappingMode MappingMode { get; set; } 

// Default is Pad 

public GradientSpreadMethod SpreadMethod { get; set; } 
// Gradient Stops 

public void AddStop (Color color, double offset); 

public GradientStopCollection GradientStops { get; set; } 

// ColorlnterpolationMode 

public ColorlnterpolationMode ColorlnterpolationMode { get; 
set; } 



As described above in the Changeables section, 
GradientBrush is a complex-type with respect to Changeables, 
because its GradientStops property itself holds Changeables. 
That means that GradientBrush needs to implement the protected 
methods MakeUnchangeableCore ( ) , and PropagateEventHandler ( ) , as 
well as CloneCoreO that Changeable subclasses implement. It 
may also choose to implement ValidateObjectState ( ) if there are 
invalid combinations of GradientStops that make up the 
collection, for instance. 
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The LinearGradient specifies a linear gradient brush along 
a vector. The individual stops specify colors stops along that 
vector. 



public sealed class System. Windows. Media. LinearGradient : 

Gradient Brush 

{ 

public LinearGradient () ; // initializes to transparent 

// Sets up a gradient with two colors and a gradient 
vector 

// specified to fill the object the gradient is applied 

to. 

// This implies RelativeToBoundingBox for the 
GradientUnits 
// property 

public LinearGradient (Color colorl, Color color2, double 
angle) ; 

public LinearGradient (Color colorl, Color color2, 

Point vectorStart, Point vectorEnd) ; 
public new LinearGradient CopyO; // hides 
Changeable . Copy ( ) 



// Gradient Vector Start Point 
// Default is 0,0 

[Animation ( "StartPointAnimations" ) ] 
public Point StartPoint { get; set; } 

public PointAnimationCollection StartPointAnimations { 
get; set; } 

// Default is 1,1 

[Animation ("EndPointAnimations") ] 

public Point EndPoint { get; set; } 

public PointAnimationCollection EndPointAnimations { get; 
set; } 
} 



linear-gradient -brush : 

"HorizontalGradient" comma-wsp color comma-wsp color | 
"VerticalGradient" comma-wsp color comma-wsp color | 
"LinearGradient" comma-wsp coordinate-pair comma-wsp 

color comma-wsp color 
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The markup for LinearGradient allows specification of a 
LinearGradient with two color stops, at offsets zero and one. 
If the "LinearGradient" version is used, the start point and 
end point are specified, respectively. If "HorizontalGradient ' 
5 is used, the start point is set to 0,0 and the end point is set 
to 1,0. If "VerticalGradient" is used, the start point is set 
to 0,0 and the end point is set to 0,1. In these cases, the 
default MappingMode is used, which is RelativeToBoundingBox . 

The RadialGradient is similar in programming model to the 

10 linear gradient. However, whereas the linear gradient has a 
start and end point to define the gradient vector, the radial 
gradient has a circle along with a focal point to define the 
gradient behavior. The circle defines the end point of the 
gradient - in other words, a gradient stop at 1.0 defines the 

15 color at the circle's circumference. The focal point defines 
center of the gradient. A gradient stop at 0.0 defines the 
color at the focal point. FIG. 16 represents a RadialGradient 
that (in grayscale) goes from white to grey. The outside 
circle represents the gradient circle while the solid dot 

20 denotes the focal point. This gradient has SpreadMethod set to 
Pad. 

public sealed class System. Windows. Media. RadialGradient : ~~ ~~ 

GradientBrush 

{ 

public RadialGradient () ; // initialize to transparent 

// Sets up a gradient with two colors. 
// This implies RelativeToBoundingBox for the 
GradientUnits 
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// property along with a center at (0.5,0.5) 

// a radius of 0.5 and a focal point at (0.5,0.5) 

public RadialGradient (Color colorl, Color color2) ; 

public new RadialGradient Copy(); // hides 
Changeable . Copy ( ) 

// Default is 0.5,0.5 
[Animation ("CenterAnimat ions") ] 
public Point Center { get; set; } 

public PointAnimationCollection CenterAnimations { get; 
set; } 

// Default is 0.5 
[Animation ("RadiusXAnimations") ] 
public double RadiusX { get; set;} 

public DoubleAnimationCollection RadiusXAnimations { get; 
set; } 

// Default is 0.5 
[Animation ( "RadiusYAnimations") ] 
public double RadiusY { get; set; } 

public DoubleAnimationCollection RadiusYAnimations { get; 
set; } 

// Default is 0.5,0.5 
[Animation ("FocusAnimat ions" ) ] 
public Point Focus { get; set; } 

public PointAnimationCollection FocusAnimations { get; 
set; } 
} 



The markup for RadialGradient allows specification of a 
RadialGradient with two color stops, at offsets 0 and 1 
respectively. The default MappingMode is used, which is 
RelativeToBoundingBox, as are the default radii, 0.5: 

radial-gradient-brush: 

"RadialGradient" comma-wsp color comma-wsp color 



The TileBrush is an abstract base class which contains 
logic to describe a tile and a means by which that tile should 
fill an area. Subclasses of TileBrush contain content, and 
logically define a way to fill an infinite plane. 
5 The Stretch enum is used to describe how a ViewBox (source 

coordinate space) is mapped to a Viewport (destination 
coordinate space) . This is used in TileBrush: 



public enum System. Windows. Stretch ~ — 

{ 

// Preserve original size 
None, 

// Aspect ratio is not preserved, ViewBox fills ViewPort 
Fill, 

// Aspect ratio is preserved, VewBox is uniformly scaled 
as large as 

// possible such that both width and height fit within 
ViewPort 

Uniform, 

// Aspect ratio is preserved, VewBox is uniformly scaled 
as small as 

// possible such that the entire ViewPort is filled by 
the ViewBox 

UniformToFill 

} 



10 FIG. 18 provides stretch examples. In these examples, the 

contents are top/left aligned. 

The TileMode enum is used to describe if and how a space 
is filled by Tiles. A TileBrush defines where the base Tile is 
(specified by the ViewPort) . The rest of the space is filled 

15 based on the TileMode value. 

public enum System. Windows. Media. TileMode 
{ 

// Do not tile - only the base tile is drawn, the remaining 



- 71 - 



area is ~" ~ ~ ~ _____ 

// left as transparent 
None, 

// The basic tile mode - the base tile is drawn and the 
remaining area 

// is filled by repeating the base tile such that the right 
edge of one 

// tile butts the left edge of the next, and similarly for 
bottom and top 
Tile, 

// The same as tile, but alternate columns of tiles are 
flipped 

// horizontally. The base tile is drawn untrans formed. 
FlipX, 

// The same as tile, but alternate rows of tiles are 
flipped vertically 

// The base tile is drawn untransf ormed. 
FlipY, 

// The combination of FlipX and FlipY. The base tile is 
drawn 

// untransformed 
FlipX Y 

} 



FIG. 19 provides TileMode examples. The top left-most tile 
in each example is the base tile. These examples represent 
None, Tile, FlipX, FlipY and FlipXY. 

The VerticalAlignment enum is used to describe how content 
is positioned within a container vertically: 

public enum System. Windows .VerticalAlignment ■ 
{ 

// Align contents towards the top of a space 
Top, 

// Center contents vertically 
Center, 

// Align contents towards the bottom of a space 
Bottom, 

} 



The HorizontalAlignment enum is used to describe how 
content is positioned within a container horizontally. 



public enum System. Windows . HorizontalAlignment 
{ 

// Align contents towards the left of a space 
Left, 

// Center contents horizontally 
Center, 

// Align contents towards the right of a space 
Right, 



The TileBrush properties select a rectangular portion of 
the infinite plane to be a tile (the ViewBox) and describe a 
destination rectangle (ViewPort) which will be the base Tile in 
5 the area being filled. The remaining destination area will be 
filled based on the TileMode property, which controls if and 
how the original tile is replicated to fill the remaining 
space: 

public abstract class System. Windows. Media. TileBrush : Brush 
{ 

public new TileBrush CopyO; // hides Brush. Copy () 

// Default is RelativeToBoundingBox 

public BrushMappingMode ViewPortUnits { get; set; } 

// Default is RelativeToBoundingBox 

public BrushMappingMode ContentUnits { get; set; } 

// Default is Rect. Empty 
[Animation ("ViewBoxAnimations") ] 
public Rect ViewBox { get; set; } 

public RectAnimationCollection ViewBoxAnimations { get; 
set; } 

// Default is Fill 

public Stretch Stretch { get; set; } 
// Default is None 

public TileMode TileMode { get; set; } 
// Default is Center 

public HorizontalAlignment HorizontalAlignment { get; set; 

} 
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// Default is Center 

public VerticalAlignment VerticalAlignment { get; set; } 

// Default is 0,0,1,1 

[Animation ( " ViewPortAnimat ions " ) ] 

public Rect Viewport { get; set; } 

public RectAnimationCollection ViewPortAnimations { get; 
set; } 

J 

A TileBrush's contents have no intrinsic bounds, and 
effectively describe an infinite plane. These contents exist 
in their own coordinate space , and the space which is being 
5 filled by the TileBrush is the local coordinate space at the 
time of application. The content space is mapped into the 
local space based on the ViewBox, Viewport, Alignments and 
Stretch properties. The ViewBox is specified in content space, 
and this rectangle is mapped into the ViewPort rectangle. 

10 The ViewPort defines the location where the contents will 

eventually be drawn, creating the base tile for this Brush. If 
the value of ViewPortUnits is Absolute, the value of ViewPort 
is considered to be in local space at the time of application. 
If, instead, the value of ViewPortUnits is 

15 RelativeToBoundingBox, then the value of ViewPort is considered 
to be in the coordinate space where 0,0 is the top/left corner 
of the bounding box of the object being painted and 1,1 is the 
bottom/right corner of the same box. For example, consider a 
RectangleGeometry being filled which is drawn from 100,100 to 

20 200,200. Then, if the ViewPortUnits is Absolute, a ViewPort of 
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(100,100,100,100) would describe the entire content area. If 
the ViewPortUnits is RelativeToBoundingBox, a Viewport of 
(0,0,1,1) would describe the entire content area. If the 
Viewport's Size is empty and the Stretch is not None, this 
5 Brush renders nothing. 

The ViewBox is specified in content space. This rectangle 
is transformed to fit within the ViewPort as determined by the 
Alignment properties and the Stretch property. If the Stretch 
is None, then no scaling is applied to the contents. If the 

10 Stretch is Fill, then the ViewBox is scaled independently in 
both X and Y to be the same size as the ViewPort. If the 
Stretch is Uniform or Unif ormToFill, the logic is similar but 
the X and Y dimensions are scaled uniformly, preserving the 
aspect ratio of the contents. If the Stretch is Uniform, the 

15 ViewBox is scaled to have the more constrained dimension equal 
to the Viewport's size. If the Stretch is Unif ormToFill, the 
ViewBox is scaled to have the less constrained dimension equal 
to the Viewport's size. Another way to think of this is that 
both Uniform and UniformToFill preserve aspect ratio, but 

20 Uniform ensures that the entire ViewBox is within the ViewPort 
(potentially leaving portions of the ViewPort uncovered by the 
ViewBox) , and UniformToFill ensures that the entire ViewPort is 
filled by the ViewBox (potentially causing portions of the 
ViewBox to be outside the ViewPort). If the ViewBox' s area is 
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empty, then no Stretch will apply. Alignment will still occur, 
and it will position the "point" ViewBox. 

Once the ViewPort is determined (based on ViewPortUnits) 
and the ViewBox' s destination size is determined (based on 
5 Stretch) , the ViewBox needs to be positioned within the 

ViewPort. If the ViewBox is the same size as the ViewPort (if 
Stretch is Fill, or if it just happens to occur with one of the 
other three Stretch values) , then the ViewBox is positioned at 
the Origin so as to be identical to the ViewPort. If not, then 

10 HorizontalAlignment and VerticalAlignment are considered. 

Based on these properties, the ViewBox is aligned in both X and 
Y dimensions. If the HorizontalAlignment is Left, then the 
left edge of the ViewBox will be positioned at the Left edge of 
the ViewPort. If it is Center, then the center of the ViewBox 

15 will be positioned at the center of the ViewPort, and if Right, 
then the right edges will meet. The process is repeated for 
the Y dimension. 

If the ViewBox is Empty it is considered unset. If it is 
unset, then ContentUnits are considered. If the ContentUnits 

20 are Absolute, no scaling or offset occurs, and the contents are 
drawn into the ViewPort with no transform. If the ContentUnits 
are RelativeToBoundingBox, then the content origin is aligned 
with the ViewPort Origin, and the contents are scaled by the 
object's bounding box's width and height. 
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When filling a space with a TileBrush, the contents are 
mapped into the Viewport as above, and clipped to the ViewPort. 
This forms the base tile for the fill, and the remainder of the 
space is filled based on the Brush's TileMode. If set, the 
5 Brush's transform is applied, which occurs after the other 
mapping, scaling, offsetting, and so forth. 

A VisualBrush is a TileBrush whose contents are specified 
by a Visual. This Brush can be used to create complex 
patterns, or it can be used to draw additional copies of the 
10 contents of other parts of the scene. 



public sealed class System. Windows. Media. VisualBrush : 
TileBrush 
{ 

public VisualBrush () ; // initializes to transparent 
public VisualBrush (Visual v) ; 

public new VisualBrush CopyO; // hides TileBrush. Copy ( ) 

// Visual - Default is null (transparent Brush) 
public Visual Visual { get; set; } 

} 



ImageBrush is a TileBrush having contents specified by an 
ImageData. This Brush can be used to fill a space with an 
Image . 

public sealed class System. Windows. Media. ImageBrush : 

TileBrush 

{ 

public ImageBrush () ; // Initializes to transparent 
contents 

// Sets the image, sets ViewBox to (0, 0, Width, Height) 

// and Stretch to Fill 

public ImageBrush (ImageData image); 

public new ImageBrush CopyQ; // hides TileBrush. Copy ( ) 
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// Default is null 

public ImageData ImageData { get; set; } 
// Default is true 

// If this is true, the ViewBox property will be 
overridden 

// and effectively set to the native size of the Image 
public bool SizeViewBoxToContent { get; set; } 



VideoBrush is a TileBrush having contents specified by a 
VideoData. This Brush can be used to fill a space with a 
Video. 



public sealed class System. Windows, Media. VideoBrush : 

TileBrush 

{ 

public VideoBrush {) ; // Initializes to transparent 
contents 

// Sets the image, sets ViewBox to (0, 0, Width, Height) and 

the 

// Stretch to Fill 

public VideoBrush (VideoData video); 

public new VideoBrush CopyO; // hides TileBrush. Copy ( ) 
// Default is null 

public VideoData VideoData { get; set; } 
// Default is true 

// If this is true, the ViewBox property will be 
overridden 

// and effectively set to the native size of the Video 
public bool SizeViewBoxToContent { get; set; } 



NineGridBrush is a Brush which always fills the object 
bounding box with its content image, and the image stretch 
isn't accomplished purely via a visual scale. The Image source 
is divided into nine rectangles by four borders (hence the name 



NineGrid) . The contents of the image in each of those nine 
regions are scaled in 0, 1 or 2 dimensions until they fill the 
object bounding box. The dimensions in which each section is 
scaled can be seen in this diagram: FIG. 17 represents the 
5 concept of a NineGrid, being enlarged from a first instance 

1702 to a second instance 1704, with four types of showing the 
nine grids which are defined by the Top, Left, Bottom and Right 
borders. The arrows in each grid square show the dimension (s) 
in which those contents will be stretched to meet the ViewPort 
10 size. 

In addition to the nine grid regions pictured above, there 
is an optional "tenth" grid. This takes the form of an 
additional image which is centered in the ViewPort and which is 
not scaled. This can be used to place a shape in the center of 
15 a button, etc. This "tenth grid" is called a glyph, and is 
exposed by the GlyphlmageData property: 



public sealed class System. Windows. Media. NineGridBrush : Brush 
{ 

public NineGridBrush (ImageData imageData, 

int LeftBorder, 
int RightBorder, 
int TopBorder, 
int BottomBorder) ; 

public NineGridBrush (ImageData imageData, 

int LeftBorder, 
int RightBorder, 
int TopBorder, 
int BottomBorder, 
ImageData glyphlmage) ; 

public new NineGridBrush CopyO; // hides Brush. CopyO 

// Default is null 
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public ImageData ImageData { get; set; } 
// Default is 0 

public int LeftBorder { get; set; } 
// Default is 0 

public int RightBorder { get; set; } 
// Default is 0 

public int TopBorder { get; set; } 
// Default is 0 

public int BottomBorder { get; set; } 
// Default is null 

public ImageData GlyphlmageData { get; set; } 

} 



Note that the border members count in from the edge of the 
image in image pixels 

The Pen is an object that takes a Brush and other 
5 parameters that describe how to stroke a space/Geometry. 

Conceptually, a Pen describes how to create a stroke area from 
a Geometry. A new region is created which is based on the 
edges of the Geometry, the Pen's Thickness, the PenLineJoin, 
PenLineCap, and so forth. Once this region is created, it is 
10 filled with the Brush. 



public sealed class System. Windows. Media. Pen : Changeable 
{ 

// Constructors 
Public Pen ( ) ; 

public Pen (Brush brush, double thickness); 

public new Pen CopyO; // hides Changeable. Copy ( ) 

// Properties 

// Default is DashArrays . Solid (no dashes) 
public DoubleCollection DashArray { get; set;} 

// Default is 0 
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[Animations (DashOf f setAnimations) ] 
public double DashOffset { get; set;} 

public DoubleAnimationCollection DashOf f setAnimations { 
get; set;} 

// Default is Flat 

public PenLineCap StartLineCap { get; set;} 
// Default is Flat 

public PenLineCap EndLineCap { get; set;} 
// Default is Flat 

public PenDashCap DashCap { get; set;} 
// Default is Miter 

public PenLineJoin LineJoin { get; set;} 
// Default is 10 

public double MiterLimit { get; set;} 

// Default is null 

public Brush Brush { get; set;} 

// Default is 1.0 
[Animations (ThicknessAnimations) ] 
public double Thickness { get; set;} 

public DoubleAnimationCollection ThicknessAnimations { 
get; set;} 

} 



The PenLineCap determines how the ends of a stroked line 
are drawn: 



public enum System. Windows .Media. PenLineCap 
{ 

// This is effectively no line cap - the line is squared 

off 

// at the last point in the line 
Flat, 

// The line is capped by a hemi-circle of diameter equal 

to 

// the line width 
Round, 

// The dash is capped by a triangle 
Triangle, 

// The line is capped with a square of side with equal to 

the 
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// line width, centered on the end point 
Square 

} 



The PenDashCap determines how the ends of each dash in a 
dashed, stroked line are drawn: 

public enum System. Windows -Media. PenDashCap 
{ 

// This is effectively no dash cap - the line is squared 

off 

// at the last point in the line 
Flat, 

// The dash is capped by a hemi-circle of diameter equal 

to 

// the line width 
Round, 

// The dash is capped by a triangle 
Triangle 

} 



The PenLineJoin determines how joints are draw when 
stroking a line: 

public enum System. Windows. Media. PenLineJoin ——————— 

{ 

// A sharp corner is created at the intersection of the 
outer 

// edges of the intersecting line segments 
Miter, 

// Similar to Miter, but the corner is rounded 
Round, 

// A beveled join, this produces a diagonal corner 
Bevel 

} 



The DashArrays class comprises static properties which 

provide access to common, well-known dash styles: 

public sealed System. Windows .Media . DashArrays 
{ 

// A solid Dash array (no dashes) 
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public static DoubleCollection Solid { get; } 
// Dash - 3 on, 1 off 

public static DoubleCollection Dash { get; } 
// Dot - 1 on, 1 off 

public static DoubleCollection Dot { get; } 

// DashDot - 3 on, 1 off, 1 on, 1 off 

public static DoubleCollection DashDot { get; } 

// DashDotDot - 3 on, 1 off, 1 on, 1 off, 1 on, 1 off 

public static DoubleCollection DashDotDot { get; } 

} 



Another brush object represented in FIG. 13 is a 
VisualBrush object. A VisualBrush is a TileBrush whose 
5 contents are specified by a Visual. This Brush can be used to 
create complex patterns, or it can be used to draw additional 
copies of the contents of other parts of the scene. 



public sealed class System. Windows .Media .VisualBrush : 
TileBrush 
{ 

public VisualBrush () ; // initializes to transparent 
public VisualBrush (Visual v) ; 

public new VisualBrush CopyO; // hides TileBrush. Copy () 

// Visual - Default is null (transparent Brush) 
public Visual Visual { get; set; } 

} 



Conceptually, the VisualBrush provides a way to have a 
10 visual drawn in a repeated, tiled fashion as a fill. This is 
represented in FIG. 12 by the visual brush referencing a visual 
(and any child visuals) that specifies a single circular shape 
1220, with that circular shape filling a rectangle 1222. Thus, 
the VisualBrush object may reference a visual to define how 
15 that brush is to be drawn, which introduces a type of multiple 
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use for visuals. In this manner, a program may use an 
arbitrary graphics "metafile" to fill an area via a brush or 
pen. Since this is a compressed form for storing and using 
arbitrary graphics, it serves a graphics resource. 
5 In one implementation, a VisualBrush' s contents have no 

intrinsic bounds, and effectively describe an infinite plane. 
These contents exist in their own coordinate space, and the 
space which is being filled by the VisualBrush is the local 
coordinate space at the time of application. The content space 

10 is mapped into the local space based on the ViewBox, Viewport, 
Alignments and Stretch properties. The ViewBox is specified in 
content space, and this rectangle is mapped into the Viewport 
(as specified via the Origin and Size properties) rectangle. 

The ViewPort defines the location where the contents will 

15 eventually be drawn, creating the base tile for this Brush. If 
the value of DestinationUnits is UserSpaceOnUse, the Origin and 
Size properties are considered to be in local space at the time 
of application. If instead the value of DestinationUnits is 
ObjectBoundingBox, then an Origin and Size are considered to be 

20 in the coordinate space, where 0,0 is the top/left corner of 
the bounding box of the object being brushed, and 1,1 is the 
bottom/right corner of the same box. For example, consider a 
RectangleGeometry being filled which is drawn from 100,100 to 
200,200. In such an example, if the DestinationUnits is 

25 UserSpaceOnUse, an Origin of 100,100 and a Size of 100,100 



- 84 - 



would describe the entire content area. If the 
DestinationUnits is ObjectBoundingBox, an Origin of 0,0 and a 
Size of 1,1 would describe the entire content area. If the 
Size is empty, this Brush renders nothing. 
5 The ViewBox is specified in content space. This rectangle 

is transformed to fit within the Viewport as determined by the 
Alignment properties and the Stretch property. If the Stretch 
is none, then no scaling is applied to the contents. If the 
Stretch is Fill, then the ViewBox is scaled independently in 

10 both X and Y to be the same size as the Viewport. If the 

Stretch is Uniform or Unif ormToFill, the logic is similar but 
the X and Y dimensions are scaled uniformly, preserving the 
aspect ratio of the contents. If the Stretch is Uniform, the 
ViewBox is scaled to have the more constrained dimension equal 

15 to the Viewport's size. If the Stretch is Unif ormToFill, the 
ViewBox is scaled to have the less constrained dimension equal 
to the Viewport's size. In other words, both Uniform and 
UniformToFill preserve aspect ratio, but Uniform ensures that 
the entire ViewBox is within the Viewport (potentially leaving 

20 portions of the ViewPort uncovered by the ViewBox) , and 

UniformToFill ensures that the entire ViewPort is filled by the 
ViewBox (potentially causing portions of the ViewBox to be 
outside the ViewPort) . If the ViewBox is empty, then no 
Stretch will apply. Note that alignment will still occur, and 

25 it will position the "point" ViewBox. 
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FIG. 18 provides representations of a single tile 1800 of 
graphics rendered with various stretch settings, including a 
tile 1800 when stretch is set to "none." The tile 1802 is a 
representation of when the stretch is set to "Uniform, " the 
5 tile 1804 when stretch is set to "Unif ormToFill, " and the tile 
1806 when stretch is set to "Fill." 

Once the ViewPort is determined (based on 
DestinationUnits) and the ViewBox' s size is determined (based 
on Stretch) , the ViewBox needs to be positioned within the 

10 ViewPort. If the ViewBox is the same size as the ViewPort (if 
Stretch is Fill, or if it just happens to occur with one of the 
other three Stretch values) , then the ViewBox is positioned at 
the Origin so as to be identical to the ViewPort. Otherwise, 
HorizontalAlignment and VerticalAlignment are considered. 

15 Based on these properties, the ViewBox is aligned in both X and 
Y dimensions. If the HorizontalAlignment is Left, then the 
left edge of the ViewBox will be positioned at the Left edge of 
the ViewPort. If it is Center, then the center of the ViewBox 
will be positioned at the center of the ViewPort, and if Right, 

20 then the right edges will meet. The process is repeated for 
the Y dimension. 

If the ViewBox is (0,0,0,0), it is considered unset, 
whereby ContentUnits are considered. If the ContentUnits are 
UserSpaceOnUse, no scaling or offset occurs, and the contents 

25 are drawn into the ViewPort with no transform. If the 
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ContentUnits are ObjectBoundingBox, then the content origin is 
aligned with the Viewport Origin, and the contents are scale by 
the object's bounding box's width and height. 

When filling a space with a VisualBrush, the contents are 
5 mapped into the Viewport as above, and clipped to the ViewPort. 
This forms the base tile for the fill, and the remainder of the 
space is filled based on the Brush's TileMode. Finally, if 
set, the Brush's transform is applied - it occurs after all the 
other mapping, scaling, offsetting, etc. 

10 The TileMode enumeration is used to describe if and how a 

space is filled by its Brush. A Brush which can be tiled has a 
tile rectangle defined, and this tile has a base location 
within the space being filled. The rest of the space is filled 
based on the TileMode value. FIG. 19 provides a 

15 representation of example graphics with various TileMode 

settings, including "None" 1900, "Tile" 1092, "FlipX" 1904, 
"FlipY" 1906 and "FlipXY" 1908. The top left-most tile in the 
various example graphics comprises the base tile. 

FIG. 20 represents a VisualBrush Grid that is defined for 

20 the tiles in a VisualBrush. The first circle is a simple grid, 
and the second has a Transform with a Skew in the x direction 
of 47. FIG. 21 shows this being filled with an image. 

Returning to FIG. 13, image brush derives from tile brush 
and thus can be tiled. NineGridBrush is very similar to 

25 ImageBrush except the image is warped based on the size. In 
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essence, NineGridBrush may be thought of a custom type of 
Stretch, in which certain parts of the image stretch, while 
others (e.g., borders) do not. Thus, while the Size of the 
image in the ImageBrush will cause a simple scale, the 
5 NineGridBrush will produce a non-uniform scale up to the 

desired size. The units for the non-scaled areas are the user 
units when the brush is applied, which means that ContentUnits 
(if it existed for NineGridBrush) would be set to 
UserUnitsOnUse. The Transform property of the Brush can be 

10 used effectively. Note that the border members count in from 
the edge of the image. 

As generally described above, the graphics object model of 
the present invention includes a Transform object model, which 
includes the types of transforms represented in the hierarchy 

15 of FIG. 7, under a Transform base class. These different types 
of components that make up a transform may include 
TransformList, TranslateTransf orm, RotateTransf orm, 
ScaleTransf orm, SkewTransf orm, and MatrixTransf orm. Individual 
properties can be animated, e.g., a program developer can 

20 animate the Angle property of a RotateTransf orm. 

Matrices for 2D computations are represented as a 3x3 
matrix. For the needed transforms, only six values are needed 
instead of a full 3x3 matrix. These are named and defined as 
follows . 
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mOO mOl 0 
mlO mil 0 
m20 m21 1 



When a matrix is multiplied with a point, it transforms 
that point from the new coordinate system to the previous 
5 coordinate system: 
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Transforms can be nested to any level. Whenever a new 
transform is applied it is the same as post-multiplying it onto 
10 the current transform matrix: 
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Most places in the API do not take a Matrix directly, but 
instead use the Transform class, which supports animation. 



20 



25 



public struct System. Windows .Media .Matrix 
{ 

// Construction and setting 

public Matrix (); // defaults to identity 

public Matrix ( 

double mOO, double mOl, 
double mlQ, double mil, 
double m20, double m21); 

// Identity 

public static readonly Matrix Identity; 

public void Setldentity ( ) ; 

public bool Isldentity { get; } 
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10 



15 



20 



25 



30 



35 



40 



public static Matrix operator * (Matrix matrixl, Matrix matrix2); 
public static Point operator * (Matrix matrix, Point point); 

// These function reinitialize the current matrix with 

// the specified transform matrix. 

public void SetTranslation (double dx, double dy) ; 

public void SetTranslation (Size offset); 

public void SetRotation (double angle); // degrees 

public void SetRotation (double angle, Point center); // degrees 

public void SetRotationRadians (double angle); 

public void SetRotationRadians (double angle, Point center); 

public void SetScaling (double sx, double sy) ; 

public void SetScaling (double sx, double sy, Point center); 

public void SetSkewX (double angle); // degrees 

public void SetSkewY (double angle); // degrees 

public void SetSkewXRadians (double angle); 

public void SetSkewYRadians (double angle); 

// These function post-multiply the current matrix 
// with the specified transform 

public void ApplyTranslation (double dx, double dy) ; 
public void ApplyTranslation (Size of f Apply) ; 
public void ApplyRotation (double angle); // degrees 
public void ApplyRotation (double angle, Point center); // 
degrees 

public void ApplyRotationRadian (double angle); 

public void ApplyRotationRadian (double angle, Point center); 

public void ApplyScaling (double sx, double sy) ; 

public void ApplyScaling (double sx, double sy, Point center); 

public void ApplySkewX (double angle); // degrees 

public void ApplySkewY (double angle); // degrees 

public void ApplySkewXRadians (double angle); 

public void ApplySkewYRadians (double angle); 

public void ApplyMatrix (Matrix matrix); 

// Inversion stuff 

public double Determinant { get; } 

public bool Islnvertible { get; } 

public void Invert (); // Throws ArgumentException if 

! Islnvertable 
public static Matrix Invert (Matrix matrix) ; 
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}; 



// Individual 
public double 
public double 
public double 
public double 
public double 
public double 



members 

MOO { get; set; 

M01 { get; set; 

M10 { get; set; 

Mil { get; set; 

M20 { get; set; 

M21 { get; set; 
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MARKUP LANGUAGE AND OBJECT MODEL FOR VECTOR GRAPHICS 



In accordance with an aspect of the present invention, a 
5 markup language and element object model are provided to enable 
user programs and tools to interact with the scene graph data 
structure 216 without requiring a specific knowledge of the 
details of the API layer 212 (FIG. 2). In general, a vector 
graphics markup language is provided, which comprises an 

10 interchange format, along with a simple markup based authoring 
format for expressing vector graphics via the element object 
model. Via this language, markup (e.g., HTML or XML-type 
content) may be programmed. Then, to build the scene graph, 
the markup is parsed and translated into the appropriate visual 

15 API layer objects that were as described above. At this higher 
operating level, an element tree, the property system and the 
layout system are provided to handle much of the complexity, 
making it straightforward for scene designers to design 
possibly complex scenes. 

20 In general, the vector graphics system generally provides 

a set of shape and other elements, integration with a general 
property system, a grouping and compositing system, and a two- 
tiered (element level and resource level) approach so that the 
user can program in a way that matches flexibility and 

25 performance needs. In keeping with one aspect of the present 
invention, the element object model for dealing with vector 
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graphics correlates with the scene graph object model. In 
other words, the vector graphics system and the Visual API 
layer share a set of resources at the element object model 
level, e.g., the Brush object is used when drawing at the 
5 Visual API and it is also the type of the fill property on 
Shape. Thus, in addition to having elements that correlate 
with the scene graph objects, the markup language shares a 
number of primitive resources (e.g., brushes, transforms, and 
so forth) with the Visual API layer. The vector graphics 
10 system also exposes and extends the animation capabilities of 
the Visual API layer, which is largely shared between the 
levels . 

Further, as described below, the vector graphics system 
can program to different profiles, or levels, including an 

15 element level and a resource level. In the element level, each 
of the drawing shapes is represented as an element at the same 
level as the rest of the programmable elements in a 
page/screen. This means that the shapes interact in a full way 
with the layout system, events and properties. In the resource 

20 level, the vector graphics systems operates in a pure resource 
format, similar to a traditional graphics metafile. The 
resource level is efficient, but has somewhat limited support 
for cascaded properties, eventing and fine-grained 
programmability. The scene designer thus has the ability to 

25 balance efficiency with programmability as needed. 
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In keeping with one aspect of the present invention, the 
vector graphics system at the resource level also correlates to 
the visual API layer, in that the resource level markup, in one 
implementation, is expressed as a VisualBrush. When the 
5 resource markup is parsed, a visual object is created. The 
visual object is set into a VisualBrush which may be used by 
shapes, controls and other elements at the element level. 

FIG. 22 is a representation of the element class hierarchy 
2200. The classes of the markup language object model of the 

10 present invention are represented via shadowed boxes, and 

include a shape class 2502, an image class 2504, a video class 
2206 and a canvas class 2208. Elements of the shape class 
include rectangle 2210, polyline 2212, polygon 2214, path 2216, 
line 2218 and ellipse 2220. Note that in some implementations, 

15 a circle element may not be present as indicated by the dashed 
box 2222 in FIG. 22, however for purposes of the various 
examples herein, the circle element 2222 will be described. 
Each element may include or be associated with fill (property) 
data, stroke data, clipping data, transform data, filter effect 

20 data and mask data. 

As described below, shapes correspond to geometry that is 
drawn with inherited and cascaded presentation properties. The 
presentation properties are used to construct the pen and the 
brush needed to draw the shapes. In one implementation, shapes 

25 are full presenters, like other control elements. However, in 
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other implementations, a canvas class 2508 may be provided as a 
container for shapes, and shapes can only be drawn when in a 
canvas element. For example, to keep shapes lightweight, 
shapes may not be allowed to have attached presenters. 
5 Instead, the canvas has an attached presenter and draws the 
shapes. Canvas elements are described in more detail below. 

As also described below, the image class is more specific 
than a shape, and for example can include border data, which 
may be complex. For example, a border can be specified as one 

10 color on the top, a different color on the sides, with possibly 
various thicknesses specified and other properties set. 
Position, size rotation and scale may be set for an image or 
similar boxed element, such as text or video. Note that the 
image and video elements can exist and be shown outside of a 

15 canvas element, and also inherit from BoxedElement , e.g., to 
get the background, borders and padding support from that 
element . 

The video element allows video (or similar multimedia) to 
be played within a displayed element. In this manner, the 

20 vector graphics system provides a markup interface to the API 
layer that is seamlessly consistent across multimedia, 
including text, 2D graphics, 3D graphics, animation, video, 
still images and audio. This allows designers to that learn to 
work with one media to easily integrate other media into 

25 applications and documents. The vector graphics system also 
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enables multimedia to be animated in the same way as other 
elements, again allows designers the ability to use multimedia 
like other elements, yet without sacrificing the core intrinsic 
uniqueness of each individual media type. For example, a 
5 designer can use the same naming scheme for rotating, scaling, 
animating, drawing, compositing and other effects across 
different media types, whereby designers may easily create very 
rich applications, as well as allowing for a very efficient 
rendering and compositing implementation to be built 

10 underneath. 

FIG. 23 represents one implementation in which the markup 
code 2302 is interpreted by a parser / translator 2304. In 
general, the parser / translator 2304 adds elements to an 
element tree / property system 208 (also represented in FIG. 2) 

15 and attaches presenters to those elements. The layout system 
210 then takes the element tree 210 with the attached 
presenters and translates the data to objects and calls to the 
visual API layer 212. Note that not all elements need to be 
translated, only those with attached presenters. 

20 In general, the markup is resolved to objects, in which an 

XML scheme for the XAML markup is usually declared at top of a 
markup file as follows: 

<Canvas 

25 xmlns="http : //schemas .microsoft . com/2003/xaml" 

xmlns : def ="Def inition" 
def : Class="Surf in. ChannelBrowser" 
def : CodeBehind="ChannelBrowser . xaml . cs" 
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ID="mainCanvas" Background="Black" 
Width="100%" Height="100%" 

Loaded= M PageLoaded"> 

5 When <Path > tag is used for example, the parser uses the 

schema to look up the relevant namespace (for example, 
System. Windows. Shapes) to resolve and build the object. 

In general, an element is an object in the element layer 
that participates in the property system, eventing and 

10 layout/presentation system. The parser finds tags and decides 
if those tags help to define an element or a resource object. 
In the special case of a VisualBrush, the same tags may be 
interpreted as elements or also interpreted as resource 
objects, depending on the context of where those tags appear, 

15 e.g., depending on whether appearing in complex property syntax 
or not. 

In accordance with one aspect of the present invention, 
the markup language provides distinct ways to describe a 
resource, including a simple string format or a complex object 
20 notation. For a simple string format, the parser / translator 
2304 uses a type converter 2308 for converting a string to an 
appropriate visual API object. By way of example, in the 
following line of markup, the Fill property value can be 
converted to a brush object, via the type converter 2308: 

25 

<Circle CenterX="10" CenterY="10" Radius="5" Fill="Red" /> 
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As can be readily appreciated, the conversion of such an inline 
line of tag-based markup with simple strings of parameters is 
to a brush object is straightforward, and provides a simple way 
for a scene designer to add a shape and its attributes to a 
5 scene. 

However there are times when the fill attribute is too 
complex to fit into a single string. In such a situation, 
complex property syntax, which may be inline in the markup, is 
used to set this property. For example, the following complex 
10 property syntax fills a circle with a gradient rather than a 
solid color, specifying the colors at various gradient stops 
(which can range from 0 to 1) : 

<Circle CenterX="10" CenterY="10" Radius="5"> 
<Circle. Fill> 

<LinearGradient> 

<GradientStop Color="Red" Of f set="0"/> 
<GradientStop Color="Blue" Of f set="0 . 33"/> 
<GradientStop Color^Green" Of f set="0 . 66"/> 
<GradientStop Color="Red" Of f set="l . 0"/> 
</LinearGradient> 
</Circle.Fill> 
</Circle> 



In addition to being present inline in the markup, a 
15 resource instance may be located elsewhere (e.g., in the markup 
or in a file, which can be local or on a remote network and 
appropriately downloaded), and referenced by a name, (e.g., a 
text name, reference or other suitable identifier) . In this 
manner, a scene designer can reuse an element in the element 
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tree throughout a scene, including elements described by the 
complex property syntax. 

The parser handles markup in the complex property syntax 
by accessing the type converter 2308 as necessary, and also 
matching specified parameters to the object properties, thereby 
handling the complexity for the scene designer. Thus, the 
parser does not just set up the objects, but also sets 
attributes on the objects. Note that the parser actually 
instantiates a builder to create the objects, since objects are 
immutable. 

Because the same rendering model is shared between the 
element level and the API level, many of the objects are 
essentially the same. This makes parsing / translation highly 
efficient, and also allows different types of programming 
languages (e.g., C#-like languages) the ability to easily 
convert from the markup to its own syntax, and vice-versa. 
Note that as represented in FIG. 23, another such programming 
language 2310 can add elements to the element tree 208, or can 
directly interface with the visual API layer 212. 

As also represented in FIG. 23 and in accordance with an 
aspect of the present invention, the same markup 2302 may be 
used to program at an element level and a resource level. As 
described above, the element level gives the scene designer 
full programmability, usage of the property system that 
provides inheritance (e.g., style-sheet like features), and 
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eventing (e.g., whereby an element may have attached code to 
change its appearance, position and so forth in response to a 
user input event) . However, the present invention also 
provides a resource-level mechanism by which scene designers 
5 can essentially shortcut the element tree and layout system and 
program directly to the visual API layer. For many types of 
static shapes, images and the like where element-level features 
are not needed, this provides a more efficient and lightweight 
way to output the appropriate object. To this end, the parser 

10 recognizes when a fill of type "visual brush" is present, and 
directly calls the API layer 212 with resource level data 2312 
to create the object. In other words, as represented in 
FIG. 22, element level vector graphics get parsed into created 
elements, which need later translation to the objects, while 

15 resource level vector graphics get parsed and directly stored 
in an efficient manner. 

By way of example, the following markup is directly 
derived from the object model for the LinearGradient object, 
and fills an outer circle with a VisualBrush. The contents of 

20 that VisualBrush are defined by the inner markup. Note that 
this syntax is commonly used for expressing various brushes, 
transforms and animations: 



<Circle CenterX="10" CenterY="10" Radius= 


"5"> 








<Circle.Fill> 










<VisualBrush xmlns= x \.."> 










<Circle CenterX="0 . 5" CenterY="0 . 5" 


Radius=" 


0. 


25" 


Fill="Blue"/> 


<Circle CenterX="0 . 6" CenterY="0 . 6" 


Radius=" 


0. 


25" 


Fill="Green"/> 


<Circle CenterX="0 . 7" CenterY="0 . 7" 


Radius=" 


0. 


25" 


Fill="Red"/> 



- 99 - 



<Circle CenterX="0 . 8" CenterY="0 . 8" Radius="0 . 25" Fill="LemonChif fon"/> 
</VisualBrush> 
</Circle.Fill> 
</Circle> 



Note that while these visual brush-filled objects are 
efficiently stored, the resource level data (or the objects 
created thereby) can be referenced by elements and part of the 
element tree 208, as generally represented in FIG. 23. To this 
end, these visual brush resources may be named (e.g., with a 
name, reference or other suitable identifier) and referenced 
like other resources described via the complex property syntax. 

Turning to an explanation of the canvas, as mentioned 
above in one alternative implementation, shapes may be kept 
lightweight and thus may be required to be contained in a 
canvas. In this alternative implementation, when content is 
rendered, it is rendered onto an infinite, device-independent 
canvas which has an associated coordinate system. The canvas 
element may thus position content according to absolute 
coordinates. The canvas element can optionally define a 
viewport, which specifies clipping, a transform, a preferred 
aspect ratio and a way of mapping the viewport into a parent 
space. If there is no viewport established, the canvas element 
only specifies a grouping of drawing primitives and can set up 
a transform, opacity and other compositing attributes. 

The following is a markup example for a sample canvas: 
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<Canvas Background="black" Top= u 100" Left=="100''Height="600" Width="800"> 
<Rectangle Top=^600" Left="100" Width="100" Height="50" Fill="red" 

Stroke="blue" StrokeWidth="10"/> 

<Line xl="100" yl="300" x2="300" y2="100" Stroke="green" StrokeWidth="5" 

/> 

</Canvas> 

Note that in one implementation, when coordinates are 
specified without units then they are considered as "logical 
pixels" of 96ths of an inch, and in the above example, the line 
5 will be 200 pixels long. In addition to coordinates, other 
properties include width, height horizontal and vertical 
alignment, and ViewBox (of type rect; default is unset or 
(0,0,0,0), meaning no adjustment is made, and the stretch and 
align properties get ignored) . As generally described above 

10 with reference to FIGS. 18-20, other properties include 

stretch, which when not specified preserves original size, or 
can 1) specify a fill in which the aspect ratio is not 
preserved and the content is scaled to fill the bounds 
established by the top/left/width/height, 2) specify uniform, 

15 which scales size uniformly until the image fits the bounds 
established by the top/left/width/height, or 3) specify 
UniformToFill, which scales size uniformly to fill the bounds 
established by top/left/width/height, and clips as necessary. 
To further correlate with the lower-level object model, 

20 the transform property establishes a new coordinate frame for 
the children of the element, while the clip property restricts 
the region to which content can be drawn on the canvas, with 
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the default clipping path defined as the bounding box. The 
ZIndex property can be used to specify rendering order for 
nested canvas elements within a panel. 

The Viewbox specifies a new coordinate system for the 
contents, e.g., by redefining the extent and origin of the 
viewport. Stretch helps to specify how those contents map into 
the viewport. The value of the viewBox attribute is a list of 
four "unitless" numbers <min-x>, <min-y>, <width> and <height>, 
e.g., separated by whitespace and/or a comma, and is of type 
Rect. The Viewbox rect specifies the rectangle in user space 
that maps to the bounding box. It works the same as inserting 
a scaleX and scaleY. The stretch property (in case the option 
is other than none) provides additional control for preserving 
the aspect ratio of the graphics. An additional transformation 
is applied to descendants of the given element to achieve the 
specified effect. 

In the example above, the effective result of the 
rectangle in the markup sample above under each stretch rule 
would be: 

None - from (100,600) to (200,650) 
Fill - from (100,100) to (900,700) 

Uniform - from (100,?) to (900,?) - the new height will be 
400, and it will centered based on HorizontalAlign and 
VerticalAlign. 

UniformToFill - from (?,100) to (?,700) The new width is 
1200, and will again be centered based on HorizontalAlign and 
VerticalAlign. 
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If there is a transform on the canvas, it is essentially 
applied above (e.g., in the tree) the mapping to ViewBox. Note 
that this mapping will stretch any of the elements in a canvas, 
5 e.g., boxes, text, and so forth, not just shapes. Further, 

note that if a viewbox is specified, the canvas no longer sizes 
to its contents, but rather has a specified size. If y-width 
and y-height are also specified, then the stretch/align 
properties are used to fit the viewbox into the specified width 

10 and height. 

The elements in the object model can each have a *Clip' 
attribute applied. On some elements, notably shapes, this is 
exposed directly as a common language runtime property, while 
on others (e.g., most controls) this property is set via a 

15 DynamicProperty . 

In general, the clipping path restricts the region to 
which content can be drawn, as generally represented in FIG. 24 
wherein a button is shown in an undipped form 2402 and a form 
2404 in which a clipping path is specified (where the dashed 

20 line represents the clipping path) . Conceptually, any parts of 
the drawing that lie outside of the region bounded by the 
currently active clipping path are not drawn. A clipping path 
can be thought of as a mask wherein those pixels outside the 
clipping path are black with an alpha value of zero and those 

25 pixels inside the clipping path are white with an alpha value 
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of one (with the possible exception of anti-aliasing along the 
edge of the silhouette) . 

A clipping path is defined by a Geometry object, either 
inline or more typically in a resource section. A clipping 
5 path is used and/or referenced using the x> Clip" property on an 



element, as shown in the following example: 



<def : Resources> 






<Geometry def:ID= 


w MyClip"> 




<Path Data= M . 


.." /> 




<Rectangle ... 


/> 




</Geometry> 






</def : Resources> 






<Element Clip= w " 


%resource; MyClip" 


.. /> 



Note that animating a Clip is similar to animating 
transforms: 



<Element> 




<Element . Clip> 




<Circle ..../> 




<Rectangle .... > 




<FloatAnimation . . 


. /> 


</Rectangle> 




</Element . Clip> 




. . . children . . . 




</Element> 





10 

A path is drawn by specifying the ^Geometry' data and the 
rendering properties, such as Fill, Stroke, and StrokeWidth on 
the Path element. An example markup for a path is specified as 
follows : 
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<Path Data="M 100 100 L 300 100 L 200 300 z" 
Fill="red" Stroke="blue" StrokeWidth="3" /> 



The path 'Data' string is of type Geometry, A more 
verbose and complete way to specify a drawn path is via the 
complex property syntax, as described above. The markup (such 
5 as in the following example) is fed directly into the Geometry 
builder classes described above: 



<Path> 

<Path.Data> 

<CircleGeometry ... /> 
<RectangleGeometry ... /> 
<PathGeometry ... /> 

</Path.Data> 

<Path.Fill value="red" /> 
<Path. Stroke value="blue"/> 
</Path> 



The path data string is also described, using the 
following notation to describe the grammar for a path data 
10 string: 



*: 0 or more 
+: 1 or more 
?: 0 or 1 
( ) : grouping 

I : separates alternatives 
double quotes surround literals 



The following shows the path data string information 
described with this notation (note that in one implementation, 
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FillMode may be specified here, instead of a property at the 
element level) : 



wvg-path: 

wsp* moveto-drawto-command-groups? wsp* 

moveto-drawto-command-groups : 
moveto-drawto-command-group 

I moveto-drawto-command-group wsp* moveto-drawto-command- 
groups 

moveto-drawto-command-group : 

moveto wsp* drawto-commands? 

drawto-commands : 
drawto-command 

I drawto-command wsp* drawto-commands 

drawto-command : 
closepath 
I lineto 

i horizontal-lineto 

I vertical-lineto 

I curveto 

I smooth-curveto 

I quadrat ic-bezier-curveto 

I smooth-quadrat ic-bezier-curveto 

I elliptical-arc 

moveto: 

( "M" | "m" ) wsp* moveto-argument-sequence 

moveto-argument-sequence: 
coordinate-pair 

t coordinate-pair comma-wsp? lineto-argument-sequence 

closepath: 

("Z" | u z") 

lineto: 

( "L" | M l" ) wsp* lineto-argument-sequence 

lineto-argument-sequence : 
coordinate-pair 

I coordinate-pair comma-wsp? lineto-argument-sequence 
horizontal-lineto: 
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( X> H" | x> h" ) wsp* horizontal-lineto-argument-sequence 

horizontal-lineto-argument-sequence: 
coordinate 

I coordinate comma-wsp? horizontal-lineto-argument- 
sequence 

vertical-lineto : 

( u v" | xx v" ) wsp* vertical-lineto-argument-sequence 

vertical-lineto-argument-sequence: 
coordinate 

I coordinate comma-wsp? vertical-lineto-argument-sequence 
curveto: 

( "C" | xx c" ) wsp* curveto-argument-sequence 

curveto-argument-sequence : 
curveto-argument 

I curveto-argument comma-wsp? curveto-argument-sequence 

curveto-argument : 

coordinate-pair comma-wsp? coordinate-pair comma-wsp? 
coordinate-pair 

smooth-curveto : 

( "S" | xx s" ) wsp* smooth-curveto-argument-sequence 

smooth-curveto-argument-sequence: 
smooth-curveto-argument 

I smooth-curveto-argument comma-wsp? smooth-curveto- 
argument-sequence 

smooth-curveto-argument : 

coordinate-pair comma-wsp? coordinate-pair 

quadratic-bezier-curveto : 

( XX Q" | xx q" ) wsp* quadratic-bezier-curveto-argument- 
sequence 

quadrat ic-bezier-curveto-argument-sequence: 
quadrat ic-bezier-curveto-argument 
I quadratic-bezier-curveto-argument comma-wsp? 
quadratic-be zier-curveto-argument-sequence 

quadrat ic-bezier-curveto-argument : 

coordinate-pair comma-wsp? coordinate-pair 

smooth-quadrat ic-bezier-curveto: 

( "T" | "t" ) wsp* smooth-quadratic-bezier-curveto- 

- 107 - 



argument-sequence 

smooth-quadrat ic-bezier-curveto-argument-sequence: 
coordinate-pair 

I coordinate-pair comma-wsp? smooth-quadratic-bezier- 
curveto-argument-sequence 

elliptical-arc: 

( "A" | "a" ) wsp* elliptical-arc-argument-sequence 

elliptical-arc-argument-sequence: 
elliptical-arc-argument 

I elliptical-arc-argument comma-wsp? elliptical-arc- 
argument-sequence 

elliptical-arc-argument : 

nonnegative-number comma-wsp? nonnegative-number comma- 
wsp? 

number comma-wsp flag comma-wsp flag comma-wsp 
coordinate-pair 

coordinate-pair : 

coordinate comma-wsp? coordinate 

coordinate: 
number 

nonnegative-number : 
integer-constant 
I floating-point-constant 

number: 

sign? integer-constant 

I sign? floating-point-constant 

flag: 

"0" | "1" 

comma-wsp: 

(wsp+ comma? wsp*) | (comma wsp*) 

comma: 
\> // 

9 

integer-constant : 
digit-sequence 

floating-point-constant : 

fractional-constant exponent? 
I digit-sequence exponent 
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fractional-constant : 

digit-sequence? digit-sequence 
I digit-sequence 








( "e" | "E" ) sign? digit-sequence 








sign: 

^ // | w _ // 








digit-sequence : 
digit 

I digit digit-sequence 








digit: 

w r\ it i w i // i wo// i wo// i w a it i w r~ // i \\ *- *§ 

0 | "i" 1 M 2 1 3 1 "4 | 5 | 6 




wg// 


wg,// 


wsp: 

(#x20 | #x9 I #xD | #xA) 









The image element (FIG. 25) indicates that the contents of 
a complete file are to be rendered into a given rectangle 
within the current user coordinate system. The image 
5 (indicated by the image tag) can refer to raster image files 
such as PNG or JPEG, or to files with MIME type of "image/wvg", 
as set forth in the following example: 



<Image Top="200" Left="200" Width="100px" Height="100px 

Source ="myimage.png"> 

</Image> 



10 
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The following table provides information on some example 
properties for images: 



Name 


Type 


R/RW 


Default Description 
Value 


Top 


BoxUnit 






Coordinate for the top side 
of the Image 


Left 


BoxUnit 






Coordinate for the left side 
of the Image 


Width 


BoxUnit 






Width of the Image 


Height 


BoxUnit 






Height of the Image 


Source 


ImageData 






Source of the Image 


Dpi 


Float 




96(?) 


Target DPI to use for sizing 


HorizontalAlign 


enum { 
Left (?), 
Center (?) , 
Right (?) 
} 




Center 




VerticalAlign 


enum { 
Top (?), 
Middle (?), 
Bottom (?) 
} 




Middle 




Stretch 


enum Stretch 
{ 

None, 
Fill, 
Uniform, 
umxormi oriii 
} 




None 


None: Preserve original size 








Fill: Aspect ratio is not 
preserved and the content is 
scaled to fill the bounds 
established by tlbh 








Uniform Scale size uniformly 
until the image fits the 
bounds established by the 
tlwh. 

Unif ormToFill : Scale size 
uniformly to fill the bounds 
established by tlbh, and 
clipped. 


ReadyState 


enum { 

MetaDataReady, 

Loading, 

Loaded 

LoadError 

} 








LoadCounter 


Int 


Read 


Null 


Counter that increments when 
ReadyState is Loading 


Name 


String 






Alternate text for the 
Image . 
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As described above, shapes correspond to geometry drawn 
with inherited and cascaded presentation properties. The 
following tables set forth example shape properties for the 
basic shape elements described above (Rectangle, Ellipse, Line, 
Polyline, Polygon) . Note that these basic shapes may have 
stroke properties, fill properties, and used as clip paths, 
have inheritance characteristics, and apply to both the element 
and Resource levels: 



Name 


Type 


R/RW 


Default 
Value 


Description 


Fill 


Brush 


RW 


null 


Coordinate for the top side of 
the rect 


FillOpacity 


Float 


RW 


1.0 


Coordinate for the left side of 
the rect 


Stroke 


Brush 


RW 


null 


Width of the rect 


StrokeOpacity 


Float 


RW 


1.0 


Height of the rect 


StrokeWidth 


BoxUnit 


RW 


lpx 


Width of the stroke. lpx - 1/96 
of an inch 


FillRule 


enum { 
EvenOdd, 
NonZero 
} 


RW 


EvenOdd 


FillRule indicates the algorithm 
which is to be used to determine 
what parts of the canvas are 
included inside the shape. 


StrokeLineCap 


enum { 

Butt, 

Round, 

Square, 

Diamond 

} 


RW 


Butt 


StrokeLineCap specifies the shape 
to be used at the end of open 
subpaths when they are stroked. 


StrokeLineJoi 
nt 


enum { 

Miter, 

Round, 

Bevel 

} 


RW 


Miter 


StrokeLineJoin specifies the 
shape to be used at the corners 
of paths (or other vector shapes) 
that are stroked when they are 
stroked. 


StrokeMiterLi 
mit 


Float 


RW 


4.0 


The limit on the ratio of the 
MiterLength to the StrokeWidth. 
Value to be >= 1 


StrokeDashArr 
ay 


PointLis 
t 


RW 


null 


StrokeDashArray controls the j 
pattern of dashes and gaps used 
to stroke paths. <dasharray> 
contains a list of space- or 
comma-separated <number>s that 
specify the lengths of 
alternating dashes and gaps in 
user units. If an odd number of 
values is provided, then the list 
of values is repeated to yield an 
even number of values. Thus, 
stroke-dasharray: 5 3 2 is 
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equivalent to 

stroke-dasharray: 5 3 2 5 3 2. 


set 


Point 


T5TVT 

RW 




StrokeDashof f set specifies the 
distance into the dash pattern to 
start the dash. 


Transform 


Transfor 
m 


RW 


null 


Transform establishes a new 
coordinate frame for the children 

D"F +~ H ci omonf 


Clip 


Geometry 


RW 


null 


Clip restricts the region to 
which paint can be applied on the 
canvas. The default clipping 
path is defined as the bounding 
box . 



The following is an example markup syntax for a rectangle: 



<Rectangle Top= u 600" Left="100" Width="100" Height="50" 
Fill="red" Stroke="blue" StrokeWidth="10"/> 



A rectangle has the following properties in the object 
model (note that rectangles are read/write, have default values 
equal to zero, support inheritance and apply to both the 
element and Resource levels) : 



Name 


Type 


Description 


Top 


BoxUnit 


Coordinate for the top side of the rect 


Left 


BoxUnit 


Coordinate for the left side of the rect 


Width 


BoxUnit 


Width of the rect 


Height 


BoxUnit 


Height of the rect 


RadiusX 


BoxUnit 


For rounded rectangles, the X-axis radius of the 
ellipse used to round off the corners of the 
rectangle. If a 

negative X-axis radius is specified, the absolute 
value of the radius will be used. 


RadiusY 


BoxUnit 


For rounded rectangles, the Y-axis radius of the 
ellipse used to round off the corners of the 
rectangle. If a 

negative X-axis radius is specified, the absolute 
value of the radius will be used. 
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The following is an example markup syntax for a circle: 



<Circle CenterX="600" CenterY="100" Fill="red 
Stroke="blue" StrokeWidth="10"/> 



A circle has the following properties in the object model (note 
5 that circles are read/write, have default values equal to zero, 
support inheritance and apply to both the element and Resource 
levels) : 



Name 


Type 


Description 


CenterX 


BoxUnit 


X coordinate of the center of the circle 


CenterY 


BoxUnit 


X coordinate of the center of the circle 


Radius 


BoxUnit 


Radius of the circle 



The following is an example markup syntax for an ellipse: 



<Ellipse CenterX="600" CenterY="100" Fill="red' 
Stroke= M blue" StrokeWidth= x> 10"/> 



10 

An ellipse has the following properties in the object model 
(note that ellipses are read/write, have default values equal 
to zero, support inheritance and apply to both the element and 
Resource levels) : 



Name 



Type 



Description 
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CenterX 


Coordinate 


X coordinate of the center of the ellipse 


CenterY 


Coordinate 


X coordinate of the center of the ellipse 


RadiusX 


Length 


The X-axis radius of the ellipse. If a 
negative X-axis radius is specified, the 

aUoUJ-ULc Value vJi Lflc XaUlUS Will 

be used. 


RadiusY 


Length 


The Y-axis radius of the ellipse. If a 
negative Y-axis radius is specified, the 
absolute value of the radius will 
be used. 



The following is an example markup syntax for a line: 



<Line xl="100" yl="300" x2="300" y2="100 
StrokeWidth="5" /> 



A line has the following properties in the object model (note 
5 that lines are read/write, have default values equal to zero, 
support inheritance and apply to both the element and Resource 
levels) : 



Name 


Type 


Description 


XI 


BoxUnit 


The X-axis coordinate of the start of the line. 
The default value is "0". 


Yl 


BoxUnit 


The Y-axis coordinate of the start of the line. 
The default value is w 0". 


X2 


BoxUnit 


The X-axis coordinate of the end of the line. 
The default value is "0". 


Y2 


BoxUnit 


The Y-axis coordinate of the end of the line. 
The default value is "0". 



10 The ^Polyline' defines a set of connected straight line 

segments. Typically , a ^Polyline' defines an open shape. 



- 114 - 



The following is an example markup syntax for a polyline: 



<Polyline Fill="None" Stroke= M Blue" StrokeWidth="10cm" 
Points="50,375 

150,375 150,325 250,325 250,375 
350,375 350,250 450,250 450,375 
550,375 550,175 650,175 650,375 
750,375 750,100 850,100 850,375 
950,375 950,25 1050,25 1050,375 
1150,375" /> 



A polyline has the following properties in the object model 
(note that lines are read/write, have default values equal to 
null, support inheritance and apply to both the element and 
Resource levels) : 



Name 


Type 


Description 


Points 


PointCollection 


The points that make up the Polyline. 
Coordinate values are in the user coordinate 
system. 



The Polygon element defines a closed shape comprising a 
set of connected straight line segments. The following is an 
example markup syntax for a polygon: 



<Polygon Fill="red" Stroke="blue" StrokeWidth= w 10 
points= w 350,75 379,161 469,161 397,215 
423,301 350,250 277,301 303,215 
231,161 321,161" /> 
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A polygon has the following properties in the object model 
(note that lines are read/write, have default values equal to 
null, support inheritance and apply to both the element and 
Resource levels) : 



Name 


Type 


Description 


Points 


PointCollection 


The points that make up the Polygon. 
Coordinate values are in the user 
coordinate system. If an odd number of 
coordinates are provided, then the element 
is in error. 



The grammar for points specifications in "polyline' and 
'polygon' elements is described with the following notation: 



*: 0 or more 
+: 1 or more 
?: 0 or 1 
() : grouping 

I : separates alternatives 
double quotes surround literals 



The following describes the points specifications in 
'Polyline' and 'Polygon' elements using the above notation: 



list-of-points : 

wsp* coordinate-pairs? wsp* 

coordinate-pairs : 
coordinate-pair 

I coordinate-pair comma-wsp coordinate-pairs 

coordinate-pair : 

coordinate comma-wsp coordinate 

coordinate: 
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number 








number: 

sign? integer-constant 

I sign? floating-point-constant 








comma -wsp: 

(wsp+ comma? wsp*) | (comma wsp*) 








comma : 

r 








integer-constant : 
digit-sequence 








floating-point-constant : 

fractional-constant exponent? 
I digit-sequence exponent 








fractional-constant : 

digit-sequence? digit-sequence 
I digit-sequence u ." 








exponent : 

( xx e" | "E" ) sign? digit-sequence 








sign: 

« -f. " | ^ _ " 








digit-sequence : 
digit 

I digit digit-sequence 








digit: 

"0" I "1" I "2" 1 "3" | "4" | "5" | "6" 


"7" 


"8" 




wsp: 

(#x20 | #x9 i #xD | #xA) + 









CONCLUSION 

As can be seen from the foregoing detailed description, 
5 there is provided a system, method and element / object model 
that provide program code various mechanisms to interface with 
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a scene graph. The system, method and object model are 
straightforward to use, yet powerful, flexible and extensible. 

While the invention is susceptible to various 
modifications and alternative constructions, certain 
5 illustrated embodiments thereof are shown in the drawings and 
have been described above in detail. It should be understood, 
however, that there is no intention to limit the invention to 
the specific forms disclosed, but on the contrary, the 
intention is to cover all modifications, alternative 
10 constructions, and equivalents falling within the spirit and 
scope of the invention. 
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